Skip to content
Submitted about 2 years ago

css grid, image color overlay via position, @media

michaelbulaongdev•170
@michaelbulaongdev
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Stats preview card component
  • HTML
  • CSS
1newbie

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

  • Agelita eMe•170
    @agelitaemePosted about 2 years ago

    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
    michaelbulaongdev•170
    @michaelbulaongdevPosted about 2 years ago

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

    0
    Agelita eMe•170
    @agelitaemePosted about 2 years ago

    @michaelbulaongmusic You're welcome :)

    0

Please log in to post a comment

Log in with GitHub

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