Submitted over 2 years ago

css grid, image color overlay via position, @media

michaelbulaongdev•170

@michaelbulaongdev

A solution to the Stats preview card component challenge

Preview Code

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.

Code

Please log in to post a comment

Community feedback

Agelita eMe•170
@agelitaeme
Posted over 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

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