Skip to content
Submitted over 2 years ago

Order Summary Component Using Angular and SCSS

Athira•130
@athirasarman
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Order summary component
  • HTML
  • CSS
1newbie

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,400
    @denieldenPosted over 2 years ago

    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

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