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

#sass/scss
Sourabh 420

@SOURABH358

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


Hey guys, this is my another solution to the frontend mentor challenge do check out my code and suggest any improvements. Thank You ✌.

Community feedback

@Harshi786

Posted

Hey @SOURABH358!

Congrats on completing the challenge.

Here are some tips to make your code perfect.

  • Remove height property from #card {}.

  • Add html { background-color: hsl(225, 100%, 94%); }.

  • For Background Image, some changes-

body {
  width: 100%;
  min-height: 100vh;
  background: url("./images/pattern-background-mobile.svg") no-repeat;
  background-position:top;
  background-size:contain;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
  • Add a nice little shadow effect to payment button as well. box-shadow: 0 20px 20px 0 rgba(56, 42, 225, 0.19);

Hope this helps :)

Marked as helpful

0

Sourabh 420

@SOURABH358

Posted

Thanks @Harshi786 for reviewing my code 👍. I have made the changes as suggested.

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