Skip to content
Submitted almost 3 years ago

Order Summary Component with a little bit of SASS :)

selehadin cyber•90
@selehadin-cyber
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

This was quite fun i gotta say . at last i got the opportunity to be comfortable with css grid

i also for the first time used SASS which i am not sure why i was not using it till now. it is really Awesome :)

as for questions i dont have specific questions this time but i do want some tipps on how to better organize scss code

Community feedback

  • Naveen Gumaste•10,480
    @NaveenGumastePosted almost 3 years ago

    Hay ! selehadin Good Job on challenge

    These below mentioned tricks will help you remove any Accessibility Issues

    -> Add Main tag after body <main class="container"></main>

    -> Learn more on accessibility issues

    If this comment helps you then pls mark it as helpful!

    Have a good day and keep coding 👍!

    Marked as helpful
    1
  • Rio Cantre•9,690
    @RioCantrePosted almost 3 years ago

    Hello there! Nice work in completing this challenge. Viewing at your solution, I would suggest the following for you...

    • Add background-color: hsla(234, 95%, 95%, 0.79); and background-position: top; in the body rule set. Remove background-attachment: fixed;, adjust background-size: 100%;.
    • Add cursor:pointer for the button
    • Wrap attribution with specific tag like footer for readability. To know more, refer it with Semantics
    • Include description with the alt in img tag
    • Remove position: absolute;, bottom: 10px; and right: 0; in attribution. Add padding: 1rem

    Overall you did great and Keep up the good work!

    Marked as helpful
    1

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