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 using HTML and CSS

@Nairitya

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


Hey Lovely people, How are you guys doing? This is my solution for the Order Summary Component using HTML and CSS with flexbox. If there is any mistake or anything which can be improved, feel free to guide me. I would greatly appreciate it if you kindly give me some feedback on this Thanks!! Keep Learning.

Community feedback

Lucas 👾 104,420

@correlucas

Posted

👾Hello @Nairitya, congratulations for your new solution!

🎯 Your solution its almost done and I’ve some tips to help you to improve it:

Your image wave background was not displaying due the lack of the ./ before the image folder to indicate the correct location.Note that if you're using the folder locally the live server recognizes the image location, but with a live solution you need to indicate where the image is. Remember, when the image is inside the repository folder use dot slash ./ and if is inside a subfolder use dot dot slash ../ If the image is the same folder of the html without folder just add normal path.

Here's the correct import: background-image: url(./images/pattern-background-desktop.svg);

body {
    background-image: url(./images/pattern-background-desktop.svg);
    box-sizing: border-box;
    height: 100vh;
    width: 100%;
    margin: 0;
    border: 0;
    text-align: center;
    /* background: url(/images/pattern-background-desktop.svg); */
    background-color: hsl(225, 100%, 94%);
    background-repeat: no-repeat;
    background-size: contain;
    font-family: "Red Hat Display", sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    color: hsl(224, 23%, 55%);
    font-size: 16px;
}

✌️ I hope this helps you and happy coding!

0
Laharl 1,000

@UrbanskiDev

Posted

Hello monk-e-man !

Congratulation for finishing the project

I have some suggestions :

  1. Since you have a css file, you could move out the little css you have on your html file if you need it to your css file !

  2. In your css file, you added multiple times a .pricing-section, you can add them together !

  3. For the colors, you can define CSS variables, which can make easier your life if you call multiple time the same color, and also make it easier to update if you have to one day. To declare a CSS variable :

:root{
--name-variable: hsl(245, 75%, 52%);
}

Then, when you want to use it, use the var() keyword with the name of the variable :

.payment-button {
  background-color: var(--name-variable);
  color: white;
  margin-bottom: 0.5rem;
  border-radius: 10px;
  box-shadow: 0 15px 20px 2px hsla(245, 49%, 67%, 0.3);
}

Good job, keep going and I hope my comment helped you !

0

@Nairitya

Posted

@UrbanskiDev Thanks, for your valuable feedback. I'll surely keep in my mind to use variables from next time if I have to use same colors many times. Thanks again for your time :)

0

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