<div class="grid">
<div class="card">
<div class="card-main">
<p><b>500 <i class="icon-plus"></i></b> Happy client</p>
</div>
<div class="card-cover">
<img src="https://cardubai.vl-it.ru/media/img/pr1.jpg" alt="" title="">
</div>
</div>
<div class="card">
<div class="card-main">
<p><b>1000 <i class="icon-plus"></i></b> Equipments</p>
</div>
<div class="card-cover">
<img src="https://cardubai.vl-it.ru/media/img/pr2.jpg" alt="" title="">
</div>
</div>
<div class="card">
<div class="card-main">
<p><b>100 <i class="icon-plus"></i></b> Expert Trainers</p>
</div>
<div class="card-cover">
<img src="https://cardubai.vl-it.ru/media/img/pr3.jpg" alt="" title="">
</div>
</div>
<div class="card">
<div class="card-main">
<p><b>150 <i class="icon-plus"></i></b> Award win</p>
</div>
<div class="card-cover">
<img src="https://cardubai.vl-it.ru/media/img/pr4.jpg" alt="" title="">
</div>
</div>
<div class="card">
<div class="card-main">
<p><b>20 <i class="icon-plus"></i></b> Personal Trainers</p>
</div>
<div class="card-cover">
<img src="https://cardubai.vl-it.ru/media/img/pr6.jpg" alt="" title="">
</div>
</div>
<div class="card">
<div class="card-main">
<p><b>100 <i class="icon-plus"></i></b> Class Room</p>
</div>
<div class="card-cover">
<img src="https://cardubai.vl-it.ru/media/img/pr5.jpg" alt="" title="">
</div>
</div>
<div class="card">
<div class="card-main">
<p><b>500 <i class="icon-plus"></i></b> Happy client</p>
</div>
<div class="card-cover">
<img src="https://cardubai.vl-it.ru/media/img/pr1.jpg" alt="" title="">
</div>
</div>
<div class="card">
<div class="card-main">
<p><b>1000 <i class="icon-plus"></i></b> Equipments</p>
</div>
<div class="card-cover">
<img src="https://cardubai.vl-it.ru/media/img/pr2.jpg" alt="" title="">
</div>
</div>
<div class="card">
<div class="card-main">
<p><b>100 <i class="icon-plus"></i></b> Expert Trainers</p>
</div>
<div class="card-cover">
<img src="https://cardubai.vl-it.ru/media/img/pr3.jpg" alt="" title="">
</div>
</div>
<div class="card">
<div class="card-main">
<p><b>150 <i class="icon-plus"></i></b> Award win</p>
</div>
<div class="card-cover">
<img src="https://cardubai.vl-it.ru/media/img/pr4.jpg" alt="" title="">
</div>
</div>
<div class="card">
<div class="card-main">
<p><b>20 <i class="icon-plus"></i></b> Personal Trainers</p>
</div>
<div class="card-cover">
<img src="https://cardubai.vl-it.ru/media/img/pr6.jpg" alt="" title="">
</div>
</div>
<div class="card">
<div class="card-main">
<p><b>100 <i class="icon-plus"></i></b> Class Room</p>
</div>
<div class="card-cover">
<img src="https://cardubai.vl-it.ru/media/img/pr5.jpg" alt="" title="">
</div>
</div>
</div>
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.card {
display: flex;
}
.card-main {
background: #ef8b35;
color: #fff;
position: relative;
width: 50%;
}
.card-main p {
position: absolute;
left: 30px;
bottom: 30px;
right: 30px;
text-transform: uppercase;
line-height: 18px;
}
.card-main p b {
font-weight: 800;
font-size: 20px;
display: block;
padding-bottom: 5px;
}
.card-cover {
width: 50%;
}
.card-cover img {
width: 100%;
display: block;
}
@media (max-width: 960px) {
.grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.card:nth-child(4n + 4),
.card:nth-child(4n + 3) {
flex-direction: row-reverse;
}
}
@media (min-width: 961px) {
.card:nth-child(6n + 6),
.card:nth-child(6n + 5),
.card:nth-child(6n + 4) {
flex-direction: row-reverse;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.