Skip to content
Submitted over 1 year ago

order-summary-component-main

RAJPUT CHIRAGSINGH ARJUNSINGH•50
@RajputChirag27
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

Frontend Mentor - Order summary card solution

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.

Table of contents

Overview

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.

Links

Built with

  • Semantic HTML5 markup
  • CSS custom properties
  • Flexbox

What I learned

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

Continued development

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

Useful resources

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

Author

Community feedback

  • C H A R A N 🎯•2,670
    @0xabdulPosted over 1 year ago

    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
    RAJPUT CHIRAGSINGH ARJUNSINGH•50
    @RajputChirag27Posted over 1 year ago

    @0xAbdul Thanks for the feedback 🙌

    0
  • Hassia Issah•50,650
    @HassiaiPosted over 1 year ago

    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
    RAJPUT CHIRAGSINGH ARJUNSINGH•50
    @RajputChirag27Posted over 1 year ago

    @Hassiai Thanks for the feedback 🙌

    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