Submitted over 2 years ago

Order Summary using Flexbox

LilMus• 160

@LilMus

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

Hi, I mainly used flexbox to do this challenge. I still have a small issue with the "proceed to payment" button. I reduced the opacity to 0.7 when hovered but doing that also reduce the opacity of the box-shadow I put on so it gives a weird result. Do you know how I could have done it differently so it wouldn't look weird ?

Maybe using two <div>, one would blank and only used for the box-shadow and the other one for the actual button. It would be like this :

And then only applying a box-shadow to .buton_proceed_blank. I just thought about this method while writing this

Community feedback

Abdul• 8,540

@Samadeen

Posted over 2 years ago

Hey!! Cheers 🥂 on completing this challenge.. .

Here are my suggestions..

You should use <main class="main__card"> instead of <div class="main__card">.
Go down orderly when you are using the headings h1 down to h2 down to h3 and so on.
You can wrapper your attribution section in a footer tag to avoid accessibility issues.
You should also remove the alt attribute in the anchor tag

This should fix most of your accessibility issues

. Regardless you did amazing... hope you find this useful... Happy coding!!!

Marked as helpful

LilMus• 160

@LilMus

Posted over 2 years ago

@Samadeen Thanks for your feedback. I don't understand the second suggestion. If I understand correctly you're suggesting me to have h1 first in my container and then h2, h3, h4, ... so what would change in my code ?

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