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 Stats Preview Card

@aaditamanugraha

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


Hallo 👋, I'm Adit, and here is my solution for the Stats Preview Card challenge.

Features:

  • 📱Responsive margin and padding.
  • 🗗 Overlay background image.

Built with:

  • Semantic HTML5 markup
  • CSS custom properties
  • Flexbox
  • Mobile-first workflow

Any suggestions?

Drop your comment and share your thoughts! 🙌

Community feedback

Hassia Issah 50,670

@Hassiai

Posted

To center the main on the page using flexbox, add min-height:100vh; display: flex; align-items: center: justify-content: center; to the body.

To center .container on the page using flexbox:
body{
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}

Hope am helpful.

Well done for completing this challenge. HAPPY CODING

Marked as helpful

0

@aaditamanugraha

Posted

Thanks for the insight @Hassiai, suddenly I just found out that there is a bug in the background-image: url() and I simply use img in HTML instead of CSS for the background image.

1
Hassia Issah 50,670

@Hassiai

Posted

@aaditamanugraha if you us the img , give the img a mix-blend-mode: multiply and the div a background-color of soft violet

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