<html>
<head>
<title>HTML, CSS and JavaScript demo</title>
</head>
<body>
<section class="testimonials">
<div class="wrapper">
<h2 class="testimonials__title">
WHAT POEPLE SAY ABOUT US
</h2>
<hr class="testimonials__line">
<p class="testimonials__text">
Our clients love us!
</p>
</div>
<div class="testimonials__members">
<div class="testimonials__member">
<div class="testimonials__member-pic">
<img src="https://i.imgur.com/5BqutWR.png" alt="" class="testimonials__member-thumb">
</div>
<div class="testimonials__member-title">
<p class="testimonials__member-text">“Nullam dapibus blandit orci, viverra<br>gravida dui lobortis eget. Maecenas<br>fringilla urna eu nisl scelerisque.”</p>
<h3 class="testimonials__member-name">Chanel Iman</h3>
<p class="testimonials__member-company">CEO of Pinterest</p>
</div>
</div>
<div class="testimonials__member">
<div class="testimonials__member-pic">
<img src="https://i.imgur.com/5BqutWR.png" alt="" class="testimonials__member-thumb">
</div>
<div class="testimonials__member-title">
<p class="testimonials__member-text">“Vivamus luctus urna sed urna ultricies<br>ac tempor dui sagittis. In condimen-<br>tum facilisis porta.”</p>
<h3 class="testimonials__member-name">ADRIANA LIMA</h3>
<p class="testimonials__member-company">Founder of Instagram</p>
</div>
</div>
<div class="testimonials__member">
<div class="testimonials__member-pic">
<img src="https://i.imgur.com/5BqutWR.png" alt="" class="testimonials__member-thumb">
</div>
<div class="testimonials__member-title">
<p class="testimonials__member-text">“Vivamus luctus urna sed urna ultricies<br>ac tempor dui sagittis. In condimen-<br>tum facilisis porta.”</p>
<h3 class="testimonials__member-name">ANNE HATHAWAY</h3>
<p class="testimonials__member-company">Lead Designer at Behance</p>
</div>
</div>
<div class="testimonials__member">
<div class="testimonials__member-pic">
<img src="https://i.imgur.com/5BqutWR.png" alt="" class="testimonials__member-thumb">
</div>
<div class="testimonials__member-title">
<p class="testimonials__member-text">“Phasellus non purus vel arcu tempor<br>commodo. Fusce semper, purus vel luctus<br>molestie, risus sem cursus neque.”</p>
<h3 class="testimonials__member-name">EMMA STONE</h3>
<p class="testimonials__member-company">Co-Founder of Shazam</p>
</div>
</div>
</div>
</section>
</body>
</html>.testimonials {
text-align: center;
height: 1200px;
background-color: #d74680;
}
.testimonials__wrapper {
max-width: 1120px;
background-color: #d74680;
}
.testimonials__title {
color: #fff;
font-size: 40px;
padding-top: 120px;
letter-spacing: 5px;
}
.testimonials__text {
color: #fff;
font-size: 18px;
padding-top: 50px;
letter-spacing: 2px;
}
.testimonials__line {
margin-top: 22px;
width: 87px;
height: 4px;
background-color: #b73c6d;
border: none;
}
.testimonials__members {
padding: 85px 100px;
display: grid;
margin: 0 auto;
grid-template-columns: repeat(2, 1fr);
}
.testimonials__member-title {}
.testimonials__member-name {
color: #ffffff;
margin-top: 29px;
font-size: 24px;
font-weight: 600;
}
.testimonials__member-company {
margin-top: 11px;
font-size: 18px;
color: #f8c495;
}
.testimonials__member-text {
color: #ffffff;
letter-spacing: 1px;
font-weight: 200;
font-size: 21px;
font-style: italic;
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.