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

css grid, image color overlay via position, @media

@michaelbulaongmusic

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


i tried not to use bootstrap for the responsive columns to test my knowledge on the use of css grid and @media rule.

had a hard time manipulating the image to show color accent overlay. i wish i could make the image a bit darker/crisper.

Community feedback

@agelitaeme

Posted

Hi, @michaelbulaongmusic!

  • In response to your question, you can intensify the color of the image by using:
background-image: url(./images/image-header-desktop.jpg), hsl(277, 64%, 61%);
background-size: cover;
background-blend-mode: multiply;
  • And I recommend you to center the card with flexbox:
body {
display: flex;
justify-content: center;
align-item: center;
}

Good job! Keep it up!

Marked as helpful

0

@michaelbulaongmusic

Posted

@agelitaeme Thank you. I appreciate this feedback. :)

0

@agelitaeme

Posted

@michaelbulaongmusic You're welcome :)

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