پیشنمایش زنده
کد HTML
<div class="card">
<div class="header">
<div>
<a class="title" href="#">
Building a SaaS product as a software developer
</a>
<p class="name">By John Doe</p>
</div>
<span class="image"></span>
</div>
<p class="description">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. At velit illum
provident a, ipsa maiores deleniti consectetur nobis et eaque.
</p>
<dl class="post-info">
<div class="cr">
<dt class="dt">Published</dt>
<dd class="dd">31st June, 2021</dd>
</div>
<div class="cr">
<dt class="dt">Reading time</dt>
<dd class="dd">3 minute</dd>
</div>
</dl>
</div>
کد CSS
.card {
max-width: 320px;
position: relative;
display: block;
overflow: hidden;
border: 1px solid rgba(243, 244, 246, );
border-radius: 0.5rem;
padding: 1rem;
background-color: #fff;
}
.header {
display: flex;
justify-content: space-between;
grid-gap: 1rem;
gap: 1rem;
}
.title {
font-size: 1.125rem;
line-height: 1.25rem;
font-weight: 700;
color: rgba(17, 24, 39, 1);
text-decoration: none;
}
.title:hover {
text-decoration: underline royalblue;
}
.name {
margin-top: 0.25rem;
font-size: 0.75rem;
line-height: 1rem;
font-weight: 500;
color: rgba(75, 85, 99, 1);
}
.image {
display: block;
flex-shrink: 0;
height: 3rem;
width: 3rem;
border-radius: 0.5rem;
object-fit: cover;
background-color: royalblue;
}
.description {
margin-top: 1rem;
font-size: 0.875rem;
line-height: 1.25rem;
color: rgba(107, 114, 128, 1);
}
.post-info {
margin-top: 1.5rem;
display: flex;
grid-gap: 1rem;
gap: 1rem;
}
.cr {
display: flex;
flex-direction: column-reverse;
}
.dt {
font-size: 0.875rem;
line-height: 1.25rem;
font-weight: 600;
color: rgba(75, 85, 99, 1);
}
.dd {
font-size: 0.75rem;
line-height: 1rem;
color: rgba(107, 114, 128,1);
}