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-main

@RajputChirag27

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


This is a solution to the Order summary card challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

The challenge is to build out this order summary card component and get it looking as close to the design as possible. I have used HTML and CSS to develop the page.

  • Semantic HTML5 markup
  • CSS custom properties
  • Flexbox

I have gained hands-on practice on CSS. Learnt how to use shadows in a project

I will try to add more features such as modal page to change the pricing options.

  • Example resource 1 - This helped me for CSS. I really liked this pattern and will use it going forward.

Community feedback

@0xabdul

Posted

Hello there Congratulations on successfully completed the order summary component πŸ˜ƒ

  • NoteπŸ“
  • A few lines Feedback for you improve your code
  • there is no Accessibility reports , nice broπŸ‘ but some issues on order summary component
  • what the issue ?
  • your order summary card is is perfect but background image is showing double two side showing so fix the problem
  • Solution
body {
background-repeat: no-repeat;
}
  • Happy Coding πŸ˜ƒ

Marked as helpful

1

Hassia Issahβ€’ 50,670

@Hassiai

Posted

There is no need to style the html, give its styling to the body.

Add a background-repeat of no-repeat to and background-size of contain to the body.

For a responsive content replace the width in .container with max-width and increase its value for it to be equivalent to the width of design. max-width: 432px which is 27rem

Hope am helpful.

Well done for completing this challenge. HAPPY CODING

Marked as helpful

1

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