/* Reviews */
.reviews {
padding: 4.66rem 0;
background: #222 url("images/Reviews/reviews-bg.jpg") center no-repeat;
}
.reviews__inner {
text-align: center;
}
.reviews__title {
font-size: 1.2rem;
font-weight: 600;
color: #12C2E9;
margin-bottom: 0.73rem;
}
.reviews__suptitle {
font-size: 2rem;
color: #fff;
font-weight: 700;
}
.reviews__suptitle:after {
content: "";
display: block;
width: 4rem;
height: 0.3rem;
margin: 3.33rem auto;
background: linear-gradient(to right, #E100FF, #F80759);
}
.reviews__reviews {
display: flex;
}
.reviews__item {
display: flex;
background-color: #222;
margin: 0 2rem;
}
.reviews__content {
text-align: left;
margin: 0 1.5rem;
}
.reviews__name {
font-size: 1.2rem;
font-weight: 600;
text-transform: capitalize;
color: #12C2E9;
margin-bottom: 0.46rem;
margin-top: 2.13rem;
}
.reviews__prof {
font-size: 0.8rem;
margin-bottom: 2.33rem;
}
<div class="reviews">
<div class="container">
<div class="reviews__inner">
<h2 class="reviews__title">Reviews</h2>
<h1 class="reviews__suptitle">WHAT OUR CLIENTS SAY</h1>
<div class="reviews__reviews">
<div class="reviews__item">
<div class="reviews__photo">
<img src="images/Reviews/2.png" alt="">
</div>
<div class="reviews__content">
<div class="reviews__name">Rebecca Morrison</div>
<div class="reviews__prof">Social Worker</div>
<div class="reviews__text">
<p>Curabitur interdum nulla ligula, ac iaculis est venon.
Quisque auctor, ex id posuere aliquam, lorem mauris venenatis sem, eu facilisis magna nibh. Praesent laoreet leo diam, ut suscipit purus malesuada laoreet. Aliquam erat volutpat.</p>
</div>
<div class="reviews__rating">★★★★★</div>
</div>
</div>
<div class="reviews__item">
<div class="reviews__photo">
<img src="images/Reviews/1.png" alt="">
</div>
<div class="reviews__content">
<div class="reviews__name">Daniel Bllomberg</div>
<div class="reviews__prof">Salesman</div>
<div class="reviews__text">
<p>Donec nec interdum turpis. Donec faucibus facilisis enim, ut fringilla urna elementum non. Mauris vel mauris ac tellus feugiat maximus. Sed augue enim, lacinia non dui ut, mollis vulputate felis. Vivamus consequat bibendum ullamcorper.</p>
</div>
<div class="reviews__rating">★★★★☆</div>
</div>
</div>
</div> <!-- ./reviews__reviews -->
</div> <!-- ./reviews__inner -->
</div> <!-- ./container -->
</div> <!-- ./reviews -->
要水平扩展父块,该父块需要设置一个 css 属性:
但在这种情况下,滑块通常是拧上的。