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

stats-preview-card-component-main

Matthew 380

@matthew-marco

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


can some one help me right the media for the mobile screen

Community feedback

Hassia Issah 50,650

@Hassiai

Posted

There is no need to give h1 and . numbers a font-size value. There is no need to give h1, p and . numbers a width value. Give . text a padding value for all the sides, there is no need for a margin-bottom value in .text .text{padding:3rem; width:60%}

For the color of the image, give image a background-color of soft violet and add mix-blend-mode: multiply and opacity 0.8 to the img.

.image{
background-color: hsl();
}
img{
height: 100%;
mix-blend-mode: multiply;
opacity: 0.8;
}

You forgot to add a media query for the mobile design.

Hope am helpful.

Well done for completing this challenge. HAPPY CODING

Marked as helpful

0

Matthew 380

@matthew-marco

Posted

@Hassiai okay I will try that but i did not forget the media for the mobile I wansn't able to do it

0
Matthew 380

@matthew-marco

Posted

@Hassiai okay I did some updates for the code and I changed the things you said but also why I should use padding instead of margin also what is the proplem from using font size I also removed it but I need to change the font size for the numbers because they were to big is that a proplem

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