Client Testimonial

client-testimonial.markdown

Client Testimonial

A Pen by Maciej Leszczyński on CodePen.

License.

index.html

<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>

style.sass

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)

styles

<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" />