Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Order Summary solution, using CSS only.

@Estebankdb17

Desktop design screenshot for the Order summary component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hey!

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

Thanks very much!

Community feedback

darryncodes 6,430

@darryncodes

Posted

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

2

@Estebankdb17

Posted

@darryncodes Actually I had the <main> instead the <div>, but I changed it :( Thank you! I'll keep it in mind!

1

@valcruxx

Posted

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

1

@Estebankdb17

Posted

@valcruxx working on that! Thank u bro

0

Please log in to post a comment

Log in with GitHub
Discord logo

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