Skip to content
Submitted over 2 years ago

Order-summary-component-main

Oyindamola•280
@Oyinalade
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

Community feedback

  • Lucas 👾•104,340
    @correlucasPosted over 2 years ago

    👾Hello Oyindamola, congratulations for this solution!

    Your card component seems great, but you can improve it even more.

    Here's some quick tips for you:

    1.First thing we can fix here is the background-image thats not filling all the screen, you can do that using some background properties, the more important in this case is background-size: cover; to allow the background gets all the screen without get same empty gap. See the fixes I did to your code below:

    body {
    background: url(images/pattern-background-desktop.svg), hsl(225, 100%, 94%);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top;
}

    2.In order to keep the component flexible and responsive, you need to replace the card width with max-width to allow the card to behave flexible.

    .card {
   max-width: 450px;
}

    3.Improve your box-shadows just creating them or in Figma or using an online tool for that, the box-shadow you've applied to the button is a little bit out the position and too strong.

    Try this value: filter: drop-shadow(0px 8px 6px rgba(7, 23, 255, 0.245));

    Or you can use this tool to create your own shadows: https://www.cssmatic.com/box-shadow

    Hope it helps and happy coding!

    Marked as helpful
    0
    Oyindamola•280
    @OyinaladePosted over 2 years ago

    @correlucas Thank you very much.

    0
  • Prince Roy•1,210
    @iprinceroyyPosted over 2 years ago

    That's excellent work @Oyinalade. You need to focus on some key points here:-

    1. There should be one heading tag on a web page, if there is no heading element requirement, then set its font size to 0. HTML- <h1></h1> CSS- h1{ font-size: 0; }
    2. The content should be wrapped inside the main landmark to avoid accessibility issues. Like this <body><main>your content goes here......</main></body>.
    3. change card width .card{width: 345px; }.
    4. Set the font of the document to 1rem which is equal to 16px body{ font-size: 1rem; }.

    Hope it adds to your learning. Happy coding :)

    Marked as helpful
    0
    Oyindamola•280
    @OyinaladePosted over 2 years ago

    @iprinceroyy Thank you.

    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