Skip to content
Submitted almost 2 years ago

Order summary card using flexbox and grid

sleeepyskies•150
@sleeepyskies
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Order summary component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Hey, I enjoyed this challenge, but have a few questions.

  • Is there a best practice when it comes to structuring the page? I find myself unsure when to use flexbox or grid.
  • How can I recreate the original background image? It looks like a gradient layered over the .svg file, but I am unsure how to approach this.

Any advice or feedback is much appreciated, thanks!

Community feedback

  • Sezimar Júnior•120
    @sezimarjrPosted almost 2 years ago

    In most cases I prefer to use flex instead of the grid because I can work better with it, I really only use the grid for cases where I need to quickly organize several objects in a space.

    For the background you can set a general color for the html and here is an example html{ background: #e0e8ff; } and you can put the background image in the body, remembering that you need to use commands like background-size and background-repeat to adjust the screen size here is an example body{ background: url(/images/pattern-background-desktop.svg); background-size: 100%; background-repeat: no-repeat; }

    Marked as helpful
    1

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