Skip to content
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted 9 months ago

Responsive preview card using FlexBox

ysagohh•260
@ysagohh
A solution to the Stats preview card component challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

Solution retrospective


What are you most proud of, and what would you do differently next time?

I'm glad it's getting easier because I know where to start and how to approach these challenges now.

What challenges did you encounter, and how did you overcome them?

I first inserted the images into the HTML, and I did the layout in CSS that way. When it was time to add the purple tint, I realized I could only do it to background images. So I needed to remove the images from the HTML and revise my CSS. The flexbox behaves differently whether the image is in the HTML or added as a background in CSS.

What specific areas of your project would you like help with?

I'm curious if there are better ways to structure the HTML. Also whether "wrapper" and "container" are okay to use as class names or if there are best practices.

Code
Loading...

Please log in to post a comment

Log in with GitHub

Community feedback

No feedback yet. Be the first to give feedback on ysagohh's solution.

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

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner
  • Use cases

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License