Skip to content
Submitted over 1 year ago

Order Summary component

Randal•120
@rcroper
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

I used Flexbox for most of the layout for this project. Is there an advantage to using grid in this situation? How would you make this accessible?

Community feedback

  • Vanza Setia•27,775
    @vanzasetiaPosted over 1 year ago

    Hi, Randal! 👋

    You should not make everything a flexbox layout. You should use it on the annual plan section to align the music icon and the text. Also, use it to make put the card in the middle of the page—by making the <body> element the flex container of the card. The other should use the default layout.

    You should set the main font-size on the <body> element. This way, you don't have to keep specifying font-size property on each text element.

    Also, the default font size is 1rem. So, any text element that has font-size: 1rem should be removed.

    I recommend making the illustration an image element instead of a background image. This way, you will have to write less CSS code.

    I suggest using a CSS reset whenever you start a new project. This can help you set the styling foundation easily. My recommendation — A Modern CSS Reset | Andy Bell

    I hope this helps. Happy coding! 😄

    0
  • Islam abozeed•240
    @islamabozeedPosted over 1 year ago

    Amazing and wonderful design as first design hope I see great tasks as this one in the future

    0

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