Submitted about 2 years ago

Stats preview card component solution

@ashwanipydev

A solution to the Stats preview card component challenge

Solution retrospective

I wanted to start my frontend journey, but I am facing a lot of problems in my code. Please help me out with this situation; I feel so tired. I have some questions during this project. Please review and give me some answers on how to remove the errors in the project. Q1: How to deal with images to make them responsive on any screen width? Q2: How to add a gradient to an image? Constructive criticism is also welcome.🤔

Code

Please log in to post a comment

Community feedback

hitmorecode•7,540

@hitmorecode

Posted about 2 years ago

Congratulations well done. I took a quick look at your markup and css and from what I've seen, it's not that bad. I've seen worst than this. You are in the right track.

/* Q1 as for the images you can use the picture element, you'll have to do some adjustments to fit you page, but this works */
<div class="right_card card">
<picture>
<source media="(min-width: 900px)" srcset="images/image-header-desktop.jpg">
<source media="(min-width: 700px)" srcset="images/image-header-mobile.jpg">
<img src="images/image-header-desktop.jpg" alt="">
</picture>
</div>

/* Q2 this is how you can solve ti*/
/* add a background color to right card, you are going to use this to blend with the image */
.right_card {
background-color: var(--soft-violet-accent);
  
}
  
.right_card img{
display: block;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 0 10px 10px 0 ;
mix-blend-mode: multiply; /* to blend the background color of the card with the image, you can use mix-blend-mode and set it to multiply */
opacity: 0.8; /* add opacity to it, and play with the opacity until you get what you want */
}

Marked as helpful

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord