Skip to content
Submitted about 2 years ago

Order Summary Card Challenge

Ilesanmi Emmanuel•110
@Ilesanmiea
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

I am happy to complete this project because it has helped me to upgrade my CSS learning. This is my first ever project using the CSS Custom Properties. After Studying CSS variables, I took it on practically by using its application on this Order Card Summary Project and it was to me intelligence catching fun.

-In addition to this, I personally learnt 12 ways to be able to center a div in CSS which was very fun to me using parent div and also child div on HTML. These are snippets of codes that I personally put on this.

:root {
  --body-background-color: rgb(224, 232, 255);
  --container-content-color: rgb(255, 255, 255);
  --inner-background-color: rgb(245, 247, 255);
  --button-background-color: hsl(245, 75%, 52%);
  --button-text-color: rgb(255, 255, 255);
  --cancel-text-color: rgb(31, 47, 86);
}
section {
  display: flex;
}
.container {
  margin: auto;
}

Continued development

Though I am happy about this project and thank God for this but I have so much to do in future to improve the way of how I write my clean code especially I want my focus to be squarely on writing Modern CSS and doing great project with a few lines of codes.

Community feedback

  • Lucas 👾•104,400
    @correlucasPosted about 2 years ago

    👾Hi Ilesanmi Emmanuel, congrats for your new solution!

    Great solution and great start! By what I saw you’re on the right track. I’ve few suggestions to you that you can consider to add to your code:

    1.Your background is applied but its not too similar to the design yet. Add background-size: contain instead of background-size: cover to make it display the size full width and center with the card vertically. Note that now is slightly different from the challenge design.

    body {
    background-size: contain;
    background-image: url(images/pattern-background-desktop.svg);
    background-repeat: no-repeat;
    background-color: var(--body-background-color);
}

    2.Think about using relative units as rem or em instead of px to improve your performance by resizing fonts between different screens and devices.Anyhow, if we want a more accessible website, then we should use rem instead of px. REM does not just apply to font size, but to all sizes as well.

    ✌️ I hope this helps you and happy coding!

    Marked as helpful
    1
    Ilesanmi Emmanuel•110
    @IlesanmieaPosted about 2 years ago

    @correlucas

    Thanks Lucas, I will take your suggestions into careful considerations. I strongly appreciate your time and effort

    0
  • Adriano•38,080
    @AdrianoEscarabotePosted about 2 years ago

    Hello Ilesanmi Emmanuel, how are you?

    I really liked the result of your project, but I have some tips that I think you will like:

    1- Page should contain a level-one heading, you could change h2 to h1 click here

    I noticed that the background image is going down at higher resolutions, to fix this I did the following:

    body { background-repeat: repeat-x; }

    the rest is great!

    Hope it helps...👍

    Marked as helpful
    0
    Ilesanmi Emmanuel•110
    @IlesanmieaPosted about 2 years ago

    @AdrianoEscarabote

    Thanks for this

    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