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

media querys, grid, flexbox

gerald 25

@peruviansd

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 to make it as equal as the template, i dont know if i'm using the correct font-size, and correct width and height. im not sure about that. my other big problem was the background i didn't know how to put that color with the image and i solved it with a background property

Community feedback

Nick 760

@Nick331102

Posted

This is the easiest way I have found for the overlay.....

try using an inset box shadow

box-shadow: inset 0 0 0 1000px rgba(109, 54, 199, 0.596);

you can adjust the color.

Are you referring to the width and height of the main container?

0

gerald 25

@peruviansd

Posted

@Nick331102 thanks bro, i didn't think about the inset at that time, thx for the idea :)

,yes .

0
Nick 760

@Nick331102

Posted

@peruviansd

you can set a max-width on the main container. so, max-width 1400px which will make it responsive. margin: 200px auto will center the main container, or close to it anyway. Usually the height is determined by the content, but if you did go with a height you could go with a min height, and stay away from fixed values.

0
gerald 25

@peruviansd

Posted

@Nick331102 thanks for the reply bro, have a great day.

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