Submitted over 2 years ago

css layout, html5, css basic

Ando• 40

@bando9

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

tell me, what is lacking and I need to improve. This will be my learning material, and I will improve it. Thank you.

Community feedback

Dev Rathore• 2,600

@GitHub-dev12345

Posted over 2 years ago

Congratulation 🚀😁 complete your challenge. Used this code want your card in center position :

in body tag Used this CSS Code: body{ display : flex; justify-content: center; align-item: center; }

in Card Design CSS Code used this property: align-self: center;

And

1.In Card design CSS Code Used this:

transform : scale(0.8); this property decrease the size of card. 😉

large size for increase the number of scale & small size for decrease the number of scale

I hope you find this helpful

Marked as helpful

Travolgi 🍕• 31,420

@denielden

Posted over 2 years ago

Hi Ando, I took some time to look at your solution and you did a great job!

Also I have some tips for improving your code:

add main tag and wrap the card for Accessibility
img element must have an alt attribute, it's very important!
remove all margin from container class
try to use flexbox to the body for center the card. Read here -> best flex guide
after add min-heigth: 100vh to body because Flexbox aligns to the size of the parent container

Overall you did well :)

Hope this help and happy coding!

Marked as helpful

Naveen Gumaste• 10,460

@NaveenGumaste

Posted over 2 years ago

Hello Ando ! Congo 👏 on completing this challenge

Let's look at some of your issues, shall we:

Use the "alt attribute" and write what img is , and if the img is for decorative then leave it empty but always add it with img tag.
For the change button color is dark-blue and it is given in style-guide and add all the font-weight to the text respectively
For Proceed to Payment add the shadow of its own color
Warp your card content around the main tag Ex: 👇

<body>
<main class="container">
*all you content here*
</main>
</body>

Check my article on accessibility issues

happy Coding😀

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