Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Client Testimonial
<section class="testimonial">
<div class="container">
<h1 class="testimonial__title">Client Testimonial</h1>
<blockquote class="testimonial__quote">
<p class="testimonial__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa fugit hic modi nisi blanditiis, possimus asperiores sint iusto dignissimos odio consequuntur, cumque nobis dicta rerum quisquam non placeat accusantium laborum!</p>
<footer class="testimonial__meta">
<img class="testimonial__img" src="https://s3.amazonaws.com/uifaces/faces/twitter/dannpetty/128.jpg" alt="Author" />
<!-- <img class="testimonial__img" src="https://developmentseed.org/images/team/avatar-placeholder.png" alt="Author" /> -->
<div>
<cite class="testimonial__author">Mike Smith</cite>
<br>
<span class="testimonial__position">Position</span>
</div>
</footer>
</blockquote>
</div>
</section>
html,
body
font: 16px Open sans, sans-serif
a
color: inherit
text-decoration: none
// #####################################
.testimonial
padding: em(80px) 0
background: #436BD7
&__title
margin: 0 0 em(20px, 22px)
font-weight: normal
font-size: rem(22px)
color: rgba(white, .7)
&__quote
display: flex
+max(700px)
flex-wrap: wrap
align-items: center
// Reset
padding: 0
border: none
footer::before
content: ''
&__text
display: flex
align-items: center
min-height: em(200px, 22px)
padding: em(30px, 22px) em(40px, 22px)
+min(700px)
max-width: 70%
padding: em(50px, 22px) em(60px, 22px)
padding-right: em(90px, 22px)
+max(700px)
margin-bottom: em(30px, 22px)
font-size: rem(22px)
line-height: 1.55
color: #888
background: white
border-radius: 0 30px
+min(700px)
border-radius: 0 50px
box-shadow: 0 10px 22px rgba(black, .2)
&__meta
display: flex
align-items: center
&__img
min-width: em(80px)
width: em(80px)
height: em(80px)
margin-right: em(20px)
+min(700px)
min-width: em(116px)
width: em(116px)
height: em(116px)
margin: 0 em(30px) 0 em(-58px)
font-size: rem(16px)
border-radius: 50%
background: white
border: solid 2px white
+min(700px)
border-width: 3px
box-shadow: 0 10px 22px rgba(black, .2)
&__author
font-size: rem(22px)
line-height: 1.1
color: white
&__position
font-size: rem(16px)
color: rgba(white, .7)
<link href="https://codepen.io/devy_pl/pen/dXombE" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment