پیشنمایش زنده
کد HTML
<div class="card">
<div class="card-image"></div>
<p class="card-title">Card title</p>
<p class="card-body">
Nullam ac tristique nulla, at convallis quam. Integer consectetur mi nec magna tristique, non lobortis.
</p>
<p class="footer">Written by <span class="by-name">John Doe</span> on <span class="date">25/05/23</span></p>
</div>
کد CSS
.card {
padding: 20px;
width: 330px;
min-height: 370px;
border-radius: 20px;
background: #212121;
box-shadow: 5px 5px 8px #1b1b1b,
-5px -5px 8px #272727;
transition: 0.4s;
}
.card:hover {
translate: 0 -10px;
}
.card-title {
font-size: 18px;
font-weight: 600;
color: #b2eccf;
margin: 15px 0 0 10px;
}
.card-image {
min-height: 170px;
background-color: #313131;
border-radius: 15px;
background: #313131;
box-shadow: inset 5px 5px 3px #2f2f2f,
inset -5px -5px 3px #333333;
}
.card-body {
margin: 13px 0 0 10px;
color: rgb(184, 184, 184);
font-size: 15px;
}
.footer {
float: right;
margin: 28px 0 0 18px;
font-size: 13px;
color: #b3b3b3;
}
.by-name {
font-weight: 700;
}