Skip to content
Submitted about 3 years ago

Stats Preview Card using HTML and CSS

Samia Mahwash•170
@Mahwash-Aly
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Stats preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

This is my third challenge on this forum. I replicated desktop version. I am not sure how to approach mobile version. According to the challenge, in mobile version, image stacks at the top of the screen while in desktop version it is placed on right hand side of screen. Do I have to create a new HTML file where I put the image first and then rest of the code. In desktop version, I divided the main container into two sub-containers, one containing the all the text and the second containing image. How do I flip the image on top if I use only one HTML file? I am not getting it.

Community feedback

  • Mohamed-G•205
    @UnderdogScripterPosted about 3 years ago

    Do you know about flex box or grid box? You can easily change the order (position) of the image relative to other HTML elements within the same container with these 2 properties; look them up in MDN documentations.

    Marked as helpful
    2

Please log in to post a comment

Log in with GitHub

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