A Pen by Ravinthranath on CodePen.
Created
November 28, 2014 02:05
-
-
Save charlenopires/16d1006b736525611eb1 to your computer and use it in GitHub Desktop.
CSS Colorful Testimonials
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
<div class="wrapper"> | |
<h3 class="title">CSS Colorful Testimonials</h3> | |
<p class="title-info">Simply added multiple color</p> | |
<div class="client dark"> | |
<span class="image-container"> | |
<img width="80" height="80" alt="Billy Whited portrait" src="https://s.gravatar.com/avatar/881a63688dc3b9eaf0fd4d8527b33442?s=80"> | |
</span> | |
<h2 class="heading">Ravi delixan</h2> | |
<p class="info">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..<br> | |
"There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain..."</p> | |
</div> | |
<div class="client salmon"> | |
<span class="image-container"> | |
<img width="80" height="80" alt="Billy Whited portrait" src="https://s.gravatar.com/avatar/881a63688dc3b9eaf0fd4d8527b33442?s=80"> | |
</span> | |
<h2 class="heading">Ravi delixan</h2> | |
<p class="info">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..<br> | |
"There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain..."</p> | |
</div> | |
<div class="client darkcyan"> | |
<span class="image-container"> | |
<img width="80" height="80" alt="Billy Whited portrait" src="https://s.gravatar.com/avatar/881a63688dc3b9eaf0fd4d8527b33442?s=80"> | |
</span> | |
<h2 class="heading">Ravi delixan</h2> | |
<p class="info">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..<br> | |
"There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain..."</p> | |
</div> | |
<div class="client crimson"> | |
<span class="image-container"> | |
<img width="80" height="80" alt="Billy Whited portrait" src="https://s.gravatar.com/avatar/881a63688dc3b9eaf0fd4d8527b33442?s=80"> | |
</span> | |
<h2 class="heading">Ravi delixan</h2> | |
<p class="info">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..<br> | |
"There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain..."</p> | |
</div> | |
<div class="client purple"> | |
<span class="image-container"> | |
<img width="80" height="80" alt="Billy Whited portrait" src="https://s.gravatar.com/avatar/881a63688dc3b9eaf0fd4d8527b33442?s=80"> | |
</span> | |
<h2 class="heading">Ravi delixan</h2> | |
<p class="info">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..<br> | |
"There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain..."</p> | |
</div> | |
</div> |
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
@font-face { | |
font-family: 'Open Sans'; | |
font-style: normal; | |
font-weight: 300; | |
src: local('Open Sans Light'), local('OpenSans-Light'), url(http://themes.googleusercontent.com/static/fonts/opensans/v8/DXI1ORHCpsQm3Vp6mXoaTXhCUOGz7vYGh680lGh-uXM.woff) format('woff'); | |
} | |
@font-face { | |
font-family: 'Open Sans'; | |
font-style: normal; | |
font-weight: 400; | |
src: local('Open Sans'), local('OpenSans'), url(http://themes.googleusercontent.com/static/fonts/opensans/v8/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff'); | |
} | |
@font-face { | |
font-family: 'Open Sans'; | |
font-style: normal; | |
font-weight: 600; | |
src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url(http://themes.googleusercontent.com/static/fonts/opensans/v8/MTP_ySUJH_bn48VBG8sNSnhCUOGz7vYGh680lGh-uXM.woff) format('woff'); | |
} | |
@font-face { | |
font-family: 'Open Sans'; | |
font-style: normal; | |
font-weight: 700; | |
src: local('Open Sans Bold'), local('OpenSans-Bold'), url(http://themes.googleusercontent.com/static/fonts/opensans/v8/k3k702ZOKiLJc3WVjuplzHhCUOGz7vYGh680lGh-uXM.woff) format('woff'); | |
} | |
.wrapper { | |
width:800px; margin:0 auto; | |
font-family: "open sans",arial,sans-serif; | |
margin-top:45px; | |
} | |
.title { font-size:45px; font-weight:bolder; padding-bottom:25px; | |
border-bottom:5px solid #ccc; margin-bottom:5px;} | |
.title-info { padding-bottom:25px; font-variant:small-caps; | |
} | |
.client { | |
margin-bottom: 1.71875em; | |
padding: 40px; | |
} | |
.client { | |
color: #ffffff; | |
margin-bottom: 1.375em; | |
padding: 40px 20px; | |
position: relative; | |
} | |
/* color list */ | |
.dark { background-color: #333333;} | |
.salmon { background-color:#FA8072;} | |
.purple { background-color:#800080;} | |
.darkcyan { background-color:#008B8B;} | |
.crimson { background-color:#DC143C;} | |
.dark .image-container img {border: 5px solid #333333;} | |
.salmon .image-container img {border: 5px solid #FA8072;} | |
.purple .image-container img {border: 5px solid #800080;} | |
.darkcyan .image-container img {border: 5px solid #008B8B;} | |
.crimson .image-container img {border: 5px solid #DC143C;} | |
/* color list */ | |
.image-container { | |
display: block; | |
height: 100%; | |
left: 0; | |
box-shadow: 0 5px 15px #cccccc; | |
margin: 0; | |
position: absolute; | |
top: 0; | |
width: 100%; | |
} | |
.image-container img { | |
left: -15px; | |
position: absolute; | |
top: -15px; | |
} | |
.image-container img { | |
border-radius: 50%; | |
height: 80px; | |
margin-bottom: 1.375em; | |
vertical-align: middle; | |
width: 80px; | |
} | |
.heading { | |
display: inline-block; | |
font-size: 0.75em; | |
letter-spacing: 0.15em; | |
line-height: 1.83333em; | |
margin: 0 0 1.83333em 20px; | |
text-transform: uppercase; | |
vertical-align: middle; | |
} | |
.heading { | |
margin: 0 0 1.83333em 55px; | |
} | |
.info { | |
font-style: italic; | |
line-height: 1.54688em; | |
position: relative; | |
z-index: 1; | |
} | |
@media screen and (max-width: 810px) { | |
.wrapper { | |
width:500px; margin:0 auto; | |
} | |
} | |
@media screen and (max-width: 600px) { | |
.wrapper { | |
width:400px; margin:0 auto; | |
} | |
} | |
@media screen and (max-width: 450px) { | |
.wrapper { | |
width:100%; margin:0 auto; | |
padding:5px; | |
} | |
.image-container img { | |
left: 15px; | |
position: absolute; | |
top: 15px; | |
} | |
.heading { | |
margin: 0 0 1.83333em 97px; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment