Skip to content
Submitted over 3 years ago

Order Summary solution, using CSS only.

Esteban Reyes•40
@Estebankdb17
A solution to the Order summary component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hey!

It's my first HTML/CSS project. Don't hesitate if you have any suggestion to improve.

Thanks very much!

Code

Please log in to post a comment

Log in

Community feedback

  • darryncodes•6,350
    @darryncodes

    Hi Esteban,

    I really like your solution, it's a good match!

    • I'd recommend updating background-size: 100% auto; and remove: background-position: 0 -280px; to match the background to the design
    • You could clear your accessibility report if you swap <div class="main"> with <main class="main"> and make your <h4> a <h2>, headings shouldn't skip levels

    All the best!

    Marked as helpful
  • Valentine Daniel•180
    @valcruxx

    Hi

    You would want to check your mobile design, the component has a slightly wider width

    And then try fixing the HTML and accessibility issues on the solution report

    Good job friend

    Marked as helpful

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