<header>
</header>
<div class="filter">
</div>
<main>
<div class="card-container">
<div class="card">
<div class="img"></div>
<div class="title"></div>
<div class="text"></div>
<div class="whatsapp"></div>
<div class="phone"></div>
</div>
<div class="card">
<div class="img"></div>
<div class="title"></div>
<div class="text"></div>
<div class="whatsapp"></div>
<div class="phone"></div>
</div>
<div class="card">
<div class="img"></div>
<div class="title"></div>
<div class="text"></div>
<div class="whatsapp"></div>
<div class="phone"></div>
</div>
<div class="card">
<div class="img"></div>
<div class="title"></div>
<div class="text"></div>
<div class="whatsapp"></div>
<div class="phone"></div>
</div>
<div class="card">
<div class="img"></div>
<div class="title"></div>
<div class="text"></div>
<div class="whatsapp"></div>
<div class="phone"></div>
</div>
<div class="card">
<div class="img"></div>
<div class="title"></div>
<div class="text"></div>
<div class="whatsapp"></div>
<div class="phone"></div>
</div>
<div class="card">
<div class="img"></div>
<div class="title"></div>
<div class="text"></div>
<div class="whatsapp"></div>
<div class="phone"></div>
</div>
<div class="card">
<div class="img"></div>
<div class="title"></div>
<div class="text"></div>
<div class="whatsapp"></div>
<div class="phone"></div>
</div>
</div>
<div class="map">
</div>
</main>
:root {
--color-white: #fff;
}
header {
background-color: #009cfb;
height: 60px;
}
.filter {
background-color: #95aac0;
height: 66px;
display: block;
box-shadow: 0 3px 3px 1px rgba(0,0,0,.08);
}
main {
display: grid;
grid-template-columns: 1fr 2fr;
grid-template-rows: minmax(100px,150px) auto;
grid-template-areas:
'section-items section-map'
'section-items section-map';
container-type: inline-size;
container-name: card;
}
.card-container {
background-color: #f2f2f2;
grid-area: section-items;
display: grid;
grid-template-columns: 1fr;
gap: 20px;
padding: 20px;
}
@container card (min-width: 1200px) {
.card-container {
grid-template-columns: 1fr 1fr;
}
}
@container card (min-width: 1700px) {
.card-container {
grid-template-columns: 1fr 1fr 1fr;
}
}
.card {
position: relative;
z-index: 10;
height: 353px;
list-style: none;
background-color: var(--color-white);
border-radius: 4px;
box-shadow: 0 3px 3px 1px rgba(0,0,0,.08);
.whatsapp,
.phone {
position: absolute;
right: 10px;
bottom: 10px;
width: 30px;
height: 30px;
border-radius: 50%;
background-color: #009cfb;
}
.phone {
right: 50px;
background-color: #24d164;
}
}
.map {
grid-area: section-map;
background-color: #fff8b8;
background: url(https://fatihhayrioglu.com/images/query-harita.png) 0 0;
background-size: contain;
}
.img {
width: 100%;
height: 180px;
background-color: #bdd3f5;
}
.title,
.text {
background-color: #000;
display: flex;
height: 30px;
margin: 10px; 20px;
}
.text {
height: 15px;
background-color: rgba(0,0,0, .5);
}
body {
margin: 0;
padding: 0;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.