So finally I created a page with SCSS. But I am getting a problem. I created this card and added scss. Initially, I get a text like this. But after few seconds it's back to what I needed. I have used google font link inside the head tag as well as imported inside scss. But the result is the same. This is only happening with text inside the cards. So here is my SCSS
.blogs {
.card-heading {
font-size: 1.3rem;
color: $card-head-color;
font-weight: 500;
}
p.card-content {
color: $secondary-color;
margin-bottom: 0;
}
.card-body {
box-shadow: 0px 0px 22px 0px #e0e0e0;
background: #ffffff00;
backdrop-filter: blur(8px);
border: #ffffff;
border-radius: 10px;
padding: 1.25rem;
}
}
<div class="blogs">
<div class="card card-body mb-3 p-1">
<div class="row">
<div class="col-4">
<img
src="https://www.visa.co.in/dam/VCOM/regional/ap/india/global-elements/images/in-visa-gold-card-498x280.png"
class="p-2 rounded"
style="height: 60px; width: 70px !important"
alt=""
/>
</div>
<div class="col-md-8 pl-0">
<small
class="text-black text-truncate-3 mb-0 p-col"
style="font-weight: 500"
>
heading of the blog. It could be anything. It needs to be
inside this box.
</small>
</div>
</div>
</div>
</div>