A Pen by Maciej Leszczyński on CodePen.
Created
October 1, 2018 00:33
-
-
Save CodeMyUI/52f68e8be952c960f954be5e7259a837 to your computer and use it in GitHub Desktop.
Client Testimonial
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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