<div class="row feedback__slide">
<!-- 1 - Big -->
<div class="feedback__photo">
<img src="img/feedback/big-1.jpg" alt="clients photo" />
</div>
<!-- 1 - Column -->
<div class="column column__feedback">
<div class="row row_center">
<div class="column__clientPhoto">
<img src="img/feedback/small-1.jpg" alt="client" />
</div>
<div class="column">
<h6 class="column__name">Виктория Лопырева</h6>
<p class="column__position">
Ведущая, модель
<span><img src="img/icons/instagram__icon.svg" alt="instagram" /></span>
</p>
</div>
</div>
<p class="column__text">
На хороших людей мне всегда везёт, и не было ещё ни одного места на планете, где я
побывала, чтобы не увезти оттуда в сердце впечатления и позитивные эмоции от общения.
</p>
<p class="column__text column__text_margin">
Живя в Америке 4 месяца, я ни разу не почувствовала сложностей с бытом или проблем в
организации какого-то процесса (от инсталляции из воздушных шаров #Kaws до поиска
квартиры в кратчайшие сроки). Несмотря на то, что моя основная команда от меня далеко, а
все потому, что мы нашли их - Олю и Никиту, они же @american_butler, которые нам теперь,
как родные. <a href="#" class="column__link">Читать далее</a>
</p>
</div>
</div>
.feedback__container {
display: box;
display: flexbox;
display: flex;
box-orient: vertical;
box-direction: normal;
flex-direction: column;
flex-direction: column;
box-pack: justify;
flex-pack: justify;
justify-content: space-between;
min-height: 100vh;
padding-top: 1rem;
}
.feedback__subtitle {
margin: 3.7rem 0 0 0;
}
.feedback__slide {
flex-pack: distribute;
justify-content: space-around;
}
.feedback__photo {
max-width: 32rem;
height:200px;
width: 100%;
margin: 5rem 0 0 0;
border:1px solid black;
}
.row_center {
box-align: center;
flex-align: center;
align-items: center;
margin: 1.7rem 0 2.5rem 0;
}
.column__feedback {
font-family: Montserrat;
color: #1d3456;
max-width: 48.8rem;
margin: 0 2rem 0 2rem;
height: 100%;
border-radius: 0px 0px 5px 5px;
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
padding: 4rem 3.6rem 5.8rem 2rem;
}
.column__clientPhoto {
margin: 0 4.4rem 0 5.3rem;
position: relative;
max-width: 10rem;
width: 100%;
padding-bottom: 23.5%;
}
.column__clientPhoto img {
position: absolute;
width: 100%;
top: 0px;
left: 0;
border-radius: 100%;
}
.column__name {
font-family: Inter;
font-weight: 700;
font-size: 1.8rem;
}
.column__position {
font-size: 1.6rem;
margin: 1.3rem 0 0 0;
font-family: Inter;
}
.column__position span {
margin: 0 0 0 4px;
}
.column__text {
font-size: 1.6rem;
line-height: 2rem;
letter-spacing: 0.1px;
line-height: 20px;
}
.column__text_margin {
margin: 2rem 0 0 0;
}
.column__text_margin a {
margin: 0 0 0 7px;
}
.column__link {
font-family: "Futura Md BT";
font-weight: 700;
font-size: 2rem;
color: #0094f7;
}
.feedback {
position: relative;
}
.row {
display:flex;
align-items: center;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.