Quote widget

index.html

<div class="row">
  <div class="column">
    <aside class="quoteContainer">
      <div class="row quoteBox"><span class="fa fa-quote-left"></span>
        <div class="row">
          <div class="small-12 columns quoteText">The greatness of a man is not in how much wealth he acquires, but in his integrity and his ability to affect those around him positively."</div>
        </div>
      </div>
      <div class="row mugshotBox">
        <div class="small-12 medium-8 columns mugshotText">Bob Marley <span>'77</span></div>
        <div class="mugshot text-center show-for-medium"><img alt="" src="http://cps-static.rovicorp.com/3/JPG_400/MI0003/146/MI0003146038.jpg"></div>
      </div>
    </aside>
  </div>
</div>

Quote widget.markdown

Quote widget

A Pen by ed ventura on CodePen.

License.

scripts

<script src="http://www.marian.edu/Sitefinity/WebsiteTemplates/Marian/App_Themes/lib/js/vendor/jquery.min.js"></script>
<script src="http://www.marian.edu/Sitefinity/WebsiteTemplates/Marian/App_Themes/lib/js/foundation.js"></script>
<script src="http://www.marian.edu/Sitefinity/WebsiteTemplates/Marian/App_Themes/lib/js/vendor/owl-carousel/owl.carousel.js"></script>
<script src="http://www.marian.edu/Sitefinity/WebsiteTemplates/Marian/App_Themes/lib/js/app.js"></script>

style.css

.quoteContainer { margin: 1em 0; }
.quoteContainer .quoteBox {
  background: white;
  border-radius: 4px;
  -webkit-box-shadow: 0 0 3px 1px #000;
  box-shadow: 0 0 3px 1px #000;
  padding: 2.420em;
  position: relative;
  border-top: 11px solid #303f9f;
}

.quoteContainer .quoteBox .quoteText {
  color: #757575;
  font-size: 2em;
  line-height: 1.1em;
}

.quoteContainer .quoteBox .fa {
  position: absolute;
  top: .1em;
  left: .1em;
  opacity: .2;
  font-size: 7em;
  color: #212121;
}

.quoteContainer .mugshotBox {
  margin-top: -65px !important;
}

.quoteContainer .mugshotBox .mugshotText {
  text-align: right;
  font-size: 1.420em;
  padding-top: 50px;
  color: #1a237e;
}

.quoteContainer .mugshotText span {
  color: #ffca28;
  line-height: 1.420em;
}

.quoteContainer .mugshotBox .mugshot img {
  border-radius: 50%;
  position: relative;
  bottom: 0;
  border: 9px solid white;
  -webkit-box-shadow: 0 0 3px 1px #000;
  box-shadow: 0 0 3px 1px #000;
  width: 140px;
  height: 140px;
}

styles

<link href="http://www.marian.edu/Sitefinity/WebsiteTemplates/Marian/App_Themes/lib/css/foundation.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="http://www.marian.edu/Sitefinity/WebsiteTemplates/Marian/App_themes/lib/css/app.css" rel="stylesheet" />
<link href="http://www.marian.edu/Sitefinity/WebsiteTemplates/Marian/App_themes/lib/js/vendor/owl-carousel/owl.carousel.css" rel="stylesheet" />
<link href="http://www.marian.edu/Sitefinity/WebsiteTemplates/Marian/App_themes/lib/js/vendor/owl-carousel/owl.theme.css" rel="stylesheet" />