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 Component with Flexbox

#react#sass/scss#next

@Programming-School-Pro-Coding

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


Feedback 😃

Community feedback

Shawn Lee 560

@OGShawnLee

Posted

Hey mate. How is it going?

I checked your project and I have some feedback for you.

  • I suggest wrapping all of your content inside of a main tag.
  • Every page should have an h1. And I would have used a span instead of the h5. By the way headings should go down in order. If you have and h1 then the next one in your page should be and h2 then h3 and so on and so forth. Doesn't apply if your are going up, though.
  • Always have and alt attribute in your images, you can leave them empty if the image is a decoration.
  • I would use this to align your card properly and correct the background pattern and color.
body {
  background-image: url("../images/pattern-background-desktop.svg");
  background-repeat: no-repeat;
  background-color:  hsl(225, 100%, 94%);
  background-size: 100%; /* the pattern stretches the whole view width*/
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3.5rem; /* separation between the card and attribution */
  min-height: 100vh;
}

I hope this helps, mate. Have a great day!

Marked as helpful

1

@Programming-School-Pro-Coding

Posted

@OGShawnLee Thank you for this suggestions

it is great

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