<section class="colectia">
<div class="container">
<h2 class="title">Коллекции плитки</h2>
<div class="colection_inner">
<div class="colection_inner-1 a">
<img class="grid-img" src="img/image35.jpg" alt="">
<div class="group1">
<b class="bs">Сияние</b>
<p class="pk">Kerama Marazzi</p>
</div>
</div>
<div class="colection_inner-1 b">
<img class="grid-img" src="img/image36.jpg" alt="">
<div class="group">
<b class="bs">Вестанвинд </b>
<p class="pk">LB-Ceramics</p>
</div>
</div>
<div class="colection_inner-1 c">
<img class="grid-img" src="img/image37.jpg" alt="">
<div class="group">
<b class="bs">Rotterdam</b>
<p class="pk">Gracia Ceramica</p>
</div>
</div>
<div class="colection_inner-1 d">
<img class="grid-img" src="img/image39.jpg" alt="">
<div class="group">
<b class="bs">Rane</b>
<p class="pk">Alma Ceramica</p>
</div>
</div>
<div class="colection_inner-1 e ">
<img class="grid-img" src="img/image38.jpg" alt="">
<div class="group">
<b class="bs">Гинардо</b>
<p class="pk">Gracia Ceramica</p>
</div>
</div>
</div>
</div>
</section>
.colectia{
margin-top: 350px;
font-family: "Montserrat";
}
.colection_inner{
display: grid;
grid-template-columns: 2fr 1fr 1fr;
grid-template-areas:
"a b c"
"a d e " ;
}
.a{
grid-area: a;
}
.b{
grid-area: b;
}
.d{
grid-area: d;
}
.e{
grid-area: e;
}
/* .grid-img {
width: 100%;
height: 100%;
object-fit: cover;
} */
.colection_inner-1{
position: relative;
}
.group1{
position: absolute;
top: 420px;
left: 20px;
color: white;
}
.group{
position: absolute;
color: white;
left: 20px;
top: 160px;
}
.bs{
font-size: 24px;
font-style: normal;
font-weight: 700;
line-height: 30px;
background: rgba(59, 185, 184, 0.80);
padding: 14px 20px;
}
.pk{
margin-top: 20px;
margin-left: 20px;
font-size: 14px;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.