<![CDATA[<div class="code-container">
<div class="blog-card">
<div class="blog-image">
<img src="https://code.bydev24.com/uploads/code-snippts/6d79a19b2686b091fda81b45dfd0214c.jpg" alt="blog-image">
<span class="blog-date">21 Aug 2022</span>
</div>
<div class="blog-content">
<h3>This blog card is awesome!</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ullamcorper neque at ligula posuere, at iaculis tellus fermentum. Aliquam ultricies porttitor metus, sed porttitor est interdum nec. Etiam at auctor metus, a porttitor turpis. Sed eu massa nec libero hendrerit suscipit.</p>
<a href="#" class="blog-btn">Read More</a>
</div>
</div>
</div>]]>
@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
body{
font-family: 'Roboto', sans-serif;
font-size: 14px;
}
.code-container {
max-width: 100%;
width: 450px;
}
.blog-card {
width: 100%;
padding: 10px;
border-radius: 10px;
box-shadow: 0px 0px 10px #0000001c;
}
.blog-image img {
width: 100%;
}
.blog-image {
border-radius: 10px;
overflow: hidden;
position: relative;
display: grid;
}
span.blog-date {
position: absolute;
top: 20px;
background: #e12e2e;
color: #fff;
padding: 4px 8px;
border-radius: 5px;
left: 20px;
font-size: 11px;
font-weight: 600;
}
.blog-content h3 {
font-size: 22px;
margin: 5px 0 10px 0;
}
.blog-content {
padding: 25px 10px;
}
.blog-content p {
margin: 0;
font-size: 14px;
line-height: 22px;
}
.blog-btn {
text-decoration: none;
background: #e12e2e;
display: inline-block;
margin-top: 30px;
color: #fff;
padding: 10px 30px;
border-radius: 10px;
}
.blog-btn:hover {
background: #00b8ff;
}
.blog-image:before {
content: "";
width: calc(100% - 20px);
height: calc(100% - 20px);
border: 1px solid #ffffff52;
position: absolute;
left: 10px;
top: 10px;
border-radius: 10px;
box-shadow: 0px 0px 5px #000;
}
