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

Responsive landing page using CSS Grid and Flex

Eric Tan 80

@erictan86

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


The image given seem to have some color being overlay. How to go about achieving that look? Advice please. Thank you.

Community feedback

MikevPeeren 2,100

@MikevPeeren

Posted

Hey @erictan86,

Good job, try to keep larger desktop version in mind, on larger screens than 1440px the space between the bottom of the component and the text is a bit large.

As for the color you can use the following, this however means that you need to load the image from css rather than using <img>

background-color: #aa5cdb;
background-blend-mode: multiply;

Marked as helpful

0

Eric Tan 80

@erictan86

Posted

@MikevPeeren Load the image from CSS meaning I create a div in html without img? Then specify the image inside CSS?

The space between the bottom of the component and text is too large - could you elaborate more on this portion?

Thanks very much for your input. I really need it to improve.

0
MikevPeeren 2,100

@MikevPeeren

Posted

@erictan86 Yes, make a definition in css and then use it on a div for example.

As for the text see this img: https://i.imgur.com/se7cGBQ.png I am talking about the empty space where no text is, this is a bit too much.

0
Eric Tan 80

@erictan86

Posted

@MikevPeeren got it. I'll take note. Thanks again.

0
Yaungni 100

@Yaungni-Linn-Latt

Posted

Greeting. As for me, I create a div container for the image. Then I apply background color to the container. Like this "background-color: hsl(277, 64%, 61%);". "61%" is the opacity of the background color.

0

Eric Tan 80

@erictan86

Posted

@Yaungni-Linn-Latt thanks. Let me give it a shot.

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