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 Using Angular and SCSS

Athira 130

@athirasarman

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


Hi Everyone,

Here is my solution for Order Summary Component done in Angular, HTML5 and SCSS. Feel free to go through my code and give suggestions for improving my code. Alternate solutions are also welcome.

Note: HTML5 issues might come up due to ng-content added by Angular.

Thanks in advance.

Community feedback

Travolgi 🍕 31,420

@denielden

Posted

Hi Athira, great work on this challenge! 😉

Here are a few tips for improve your code:

  • For add the top image in the background just put more specific background properties to the body:
background: url("../img/pattern-background-desktop.svg") no-repeat top center;
background-size: contain;
background-color: #e0e8ff;
  • remove all unnecessary code, the less you write the better as well as being clearer: for example the div container of image
  • use min-height: 100vh instead of height to content class
  • use h1 for the title of card and not header tag
  • instead of using px use relative units of measurement like rem -> read here

Overall you did well 😁 Hope this help!

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