Submitted about 2 years ago

Order Summary Card Challenge

Ilesanmi Emmanuel• 110

@Ilesanmiea

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Order summary component

HTML
CSS

1newbie

View challenge

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;
}

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,420

@correlucas

Posted 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

Ilesanmi Emmanuel• 110

@Ilesanmiea

Posted about 2 years ago

@correlucas

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

Adriano• 34,090

@AdrianoEscarabote

Posted 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

Ilesanmi Emmanuel• 110

@Ilesanmiea

Posted about 2 years ago

@AdrianoEscarabote

Thanks for this

Please log in to post a comment

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