<div class="block">
<div class="block__pic">
<div class="block__line block__line_hidden"></div>
<img src="https://images.unsplash.com/photo-1467632499275-7a693a761056?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="" class="block__img">
<div class="block__line"></div>
</div>
<div class="block__container">
<div class="block__title">
Заголовок
</div>
<div class="block__content">
Consectetur adipisicing elit. Qui veritatis enim doloribus! Iste optio accusantium modi
</div>
</div>
</div> <!-- END block -->
<div class="block">
<div class="block__pic">
<div class="block__line"></div>
<img src="https://images.unsplash.com/photo-1467632499275-7a693a761056?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="" class="block__img">
<div class="block__line"></div>
</div>
<div class="block__container">
<div class="block__title">
Заголовок
</div>
<div class="block__content">
Qui veritatis enim doloribus!
</div>
</div>
</div> <!-- END block -->
<div class="block">
<div class="block__pic">
<div class="block__line"></div>
<img src="https://images.unsplash.com/photo-1467632499275-7a693a761056?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="" class="block__img">
<div class="block__line"></div>
</div>
<div class="block__container">
<div class="block__title">
Заголовок
</div>
<div class="block__content">
Lorem ipsum, dolor sit amet consectetur adipisicing elit.
</div>
</div>
</div> <!-- END block -->
<div class="block">
<div class="block__pic">
<div class="block__line"></div>
<img src="https://images.unsplash.com/photo-1467632499275-7a693a761056?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="" class="block__img">
<div class="block__line block__line_hidden"></div>
</div>
<div class="block__container">
<div class="block__title">
Заголовок
</div>
<div class="block__content">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Qui veritatis enim doloribus! Iste optio accusantium modi
</div>
</div>
</div> <!-- END block -->
body {
padding: 0;
margin: 0;
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.block {
width: 25%;
}
.block__pic {
display: flex;justify-content: center;align-items: center;
height: 180px
}
.block__line {
flex-grow: 1;
height: 2px;
background-color: orange;
}
.block__line_hidden {
opacity: 0;
}
.block__img {
width: 120px;
height: 130px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
overflow: hidden;
background-color: #ccc;
-webkit-clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
margin: 10px 0;
}
.block__container {
max-width: 80%;
margin: 0 auto;
text-align: center;
}
.block__title {
padding: 10px 0;
font-weight: bold;
font-size: 20px
}
@media (max-width: 600px) {
.block {
width: 50%;
}
.block__line {
opacity: 1;
}
}
@media (max-width: 400px) {
.block {
width: 100%;
}
.block__line {
opacity: 1;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.