پیشنمایش زنده
کد HTML
<div class="card">
<div class="main-content">
<div class="header">
<span></span>
<span>03/01/2024</span>
</div>
<p class="heading">
Different ways to use HTML, CSS, JAVA SCRIPT, IN REACT
</p>
<div class="categories">
<span>HTML</span>
<span>CSS</span>
<span>JAVA SCRIPT</span>
<span>REACT </span>
</div>
</div>
<div class="footer">By @iamabdulbasit___</div>
</div>
کد CSS
.card {
width: 330px;
height: 370px;
padding: 20px;
color: white;
background: linear-gradient(#212121, #212121) padding-box,
linear-gradient(145deg, transparent 35%, #0a89a8, #252e31) border-box;
border: 2px solid transparent;
border-radius: 8px;
display: flex;
flex-direction: column;
cursor: pointer;
transform-origin: top bottom;
transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}
.card .main-content {
flex: 1;
}
.card .header span:first-child {
font-weight: 600;
color: #717171;
margin-right: 4px;
}
.card .heading {
font-size: 24px;
margin: 24px 0 16px;
font-weight: 600;
}
.card .categories {
display: flex;
gap: 10px;
}
.card .categories span {
background-color: #0a89a8;
padding: 4px 8px;
font-weight: 600;
text-transform: uppercase;
font-size: 12px;
border-radius: 50em;
}
.card .footer {
font-weight: 600;
color: #717171;
margin-right: 4px;
}
.card:hover {
rotate: -6deg;
}