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

Responsive Order summary page using Sass and CSS Grid

#sass/scss

@Refara08

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


Applying and Positioning the main Background of the page is quite challenging and tricky. as I thought I should make two layers of background, plain color background at body and also, pattern background at container class that wrap all around page content (the card and footer). I don't know if this solution is the best way. So, let me know if you have more effective solution to this case. I will appreciate it! :).

please check my repository for my full case explanation: https://github.com/Refara08/Order-summary-Frontend-mentor

Community feedback

P
AK 6,700

@skyv26

Posted

To solve accessibility issues:

  1. wrap everything in your body in <main> OR give role="" to the direct children of your <body> ... Click here to read more here

  2. <a> should have an aria-label ... Click here to read more here

Good Luck ;)

1

@Refara08

Posted

@skyv26 Thank you very much for your suggestion! :). I will read the page the you linked in, and I would give it a try.

1

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