پیشنمایش زنده
کد HTML
<div class="card">
<div class="no-image">
<svg
class="icon"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
>
<path
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.1"
d="m3 16 5-7 6 6.5m6.5 2.5L16 13l-4.286 6M14 10h.01M4 19h16a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1Z"
></path>
</svg>
</div>
<div class="content">
<p class="name">UIVERSE</p>
<p class="time">03.04.2024 - 04.04.2024</p>
</div>
</div>
کد CSS
.card {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
width: 285px;
padding: 8px;
background-color: #282727;
border-radius: 8px;
display: flex;
flex-direction: column;
cursor: pointer;
aspect-ratio: 16/12;
transition: all 0.3s ease;
}
.card .no-image {
border: 2px dashed #373737;
display: flex;
align-items: center;
justify-content: center;
border-radius: 8px;
aspect-ratio: 16/8;
}
.card .no-image .icon {
width: 60px;
color: #373737;
}
.card .image {
width: 100%;
aspect-ratio: 16/8;
}
.card .image .picture {
border-radius: 8px;
width: inherit;
aspect-ratio: 16/8;
}
.card .content {
display: flex;
flex-direction: column;
padding-top: 12px;
padding-left: 4px;
}
.card .content .name {
font-size: 1.5rem;
color: #ffffff;
}
.card .content .time {
padding-top: 12px;
font-size: 0.875rem;
color: #c5c5c5;
}
.card:hover {
-webkit-box-shadow: 0px 0px 15px -8px rgba(66, 68, 90, 1);
-moz-box-shadow: 0px 0px 15px -8px rgba(66, 68, 90, 1);
box-shadow: 0px 0px 15px -8px rgba(66, 68, 90, 1);
}