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

#bootstrap#itcss

@Buddhad

Desktop design screenshot for the Stats preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

Rio Cantre 9,710

@RioCantre

Posted

Hello there! Nice work in completing this challenge. Looking at your solution, I would recommend this for you...

  • Add margin: auto; in the .card rule set to align the content in the center
  • Add media queries, with ma-width:1125px as the starting point of the breakpoints and use Flexbox for alignment
  • In the .card img.hero add width: 100%; and remove margin-left: 50px;
  • Add padding: 2rem; in the content rule set
  • For the main image, you can refer it with this example Pseudo Elements

Hope this helps and Keep it going!

Marked as helpful

0

@Buddhad

Posted

@RioCantre Thank you this is really helpful.

1
Travolgi 🍕 31,480

@denielden

Posted

Hi Buddhadeb, great job!

try to use background-blend-mode for image. Look here -> blend mode

Hope this help and happy coding :)

Marked as helpful

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