پیشنمایش زنده
کد HTML
<div class="card">
<div class="wrapper">
<div class="card-image">III</div>
<div class="content">
<p class="title">UIVERSE PREMIUM FONT (REGULAR)</p>
<p class="title price">$3</p>
<p class="title price old-price"> $6</p>
<p></p>
</div>
<button class="card-btn">DOWNLOAD</button>
</div>
<p class="tag">-50%</p>
</div>
کد CSS
.card {
width: 190px;
height: 254px;
background: #f5f5f5;
padding: 15px;
border-radius: 10px;
overflow: hidden;
transition: all 0.3s;
position: relative;
}
.wrapper {
height: fit-content;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 15px;
}
.card-image {
width: 100%;
height: 170px;
display: flex;
align-items: center;
justify-content: center;
font-size: 5em;
font-weight: 900;
transition: all 0.3s;
}
.content {
height: fit-content;
display: flex;
align-items: flex-start;
justify-content: center;
}
.title {
font-size: 0.72em;
text-transform: uppercase;
font-weight: 500;
color: #4d4d4d;
}
.price {
font-size: 1em;
font-weight: 700;
}
.old-price {
font-size: 0.7em;
text-decoration: line-through;
color: #adadad;
}
.card-btn {
margin-top: 10px;
width: 100%;
height: 40px;
background-color: rgb(24, 24, 24);
border: none;
border-radius: 40px;
color: white;
transition: all 0.3s;
cursor: pointer;
font-weight: 500;
}
.card:hover .card-image {
height: 120px;
}
.card:hover .card-btn {
margin-top: 0;
}
.card-btn:hover {
background-color: greenyellow;
color: rgb(35, 35, 35);
}
.card:hover {
background-color: white;
}
.tag {
position: absolute;
background-color: greenyellow;
color: rgb(0, 0, 0);
left: 12px;
top: 12px;
padding: 6px 12px;
border-radius: 15px;
font-size: 0.75em;
font-weight: 500;
}