Design comparison
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 :
<div class="button_proceed_blank"> <div class="button_proceed"> </div> </div>And then only applying a box-shadow to .buton_proceed_blank. I just thought about this method while writing this
Community feedback
- @SamadeenPosted 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 helpful1@LilMusPosted 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 ?
0
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