Card Display flex
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.card-item{
width: 200px;
border: solid 2px ;
position: relative;
}
.card-item img{
width: 100%;
}
.card-item .dic{
width: 40px;
height: 40px;
background: yellow;
border-radius: 26px;
/* box-sizing: content-box; */
/* padding: 5px; */
position: absolute;
top: 10px;
right: 5px;
}
.dic span{
margin: auto 10px;
}
.price{
background: black;
color: white;
position: absolute;
bottom: 31px;
right: 0px;
}
.name{
background: black;
color: white;
position: absolute;
bottom: 0px;
right: 0px;
left: 0;
}
</style>
</head>
<body>
<div style="display: flex;gap: 6px;">
<div class="card-item">
<img src="img/1.webp">
<div class="dic">
<span>
30%
</span>
</div>
<span class="price">
Rs 1000
</span>
<span class="name">
Jiense Panit
</span>
</div>
<div class="card-item">
<img src="img/1.webp">
<div class="dic">
<span>
30%
</span>
</div>
<span class="price">
Rs 1000
</span>
<span class="name">
Jiense Panit
</span>
</div>
<div class="card-item">
<img src="img/1.webp">
<div class="dic">
<span>
30%
</span>
</div>
<span class="price">
Rs 1000
</span>
<span class="name">
Jiense Panit
</span>
</div>
<div class="card-item">
<img src="img/1.webp">
<div class="dic">
<span>
30%
</span>
</div>
<span class="price">
Rs 1000
</span>
<span class="name">
Jiense Panit
</span>
</div>
</div>
</body>
</html>
Comments
Post a Comment