Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Stats Preview Card

Saulius K. 560

@TH3RIV

Desktop design screenshot for the Stats preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


It definitely looked easier than it turned out to be. I did struggle with the image overlay and responsiveness quite a bit, even now I am not happy with it 100%.

Think I'll keep trying to work with BEM methodology, anything that's not right, please point out, so I can address it next time.

All feedback is more than welcome, I strive to be the best version I can become.

Community feedback

@catherineisonline

Posted

Hey, for the image to match the color, I did something like this, I hope that helps, sizes might not fit your solutions but you can adapt it depending to your own code:

<div class="image-container">
img class="main-image" src="images/image-header-mobile.jpg" alt="">
</div>

.image-container {
  display: inherit;
  position: relative;
  width: 100%;
  border-radius: 0 10px 10px 0;
  background-color: hsl(277, 64%, 61%);
}
.main-image {
  width: 100%;
  height: 100%;
  position: relative;
  background-size: cover;
  border-radius: 0 10px 10px 0;
  mix-blend-mode: multiply;
  opacity: 0.75;
}

IF THIS WAS HELPFUL PLEASE MARK IT AS HELPFUL 🤩

Marked as helpful

0

Saulius K. 560

@TH3RIV

Posted

Hi, @catherineisonline! Every suggestion is helpful, the more I know the better ☺️

0

Please log in to post a comment

Log in with GitHub
Discord logo

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