Normal static component site with HTML and SASS with BEM & flexbox
Design comparison
Solution retrospective
All Of your feedback and suggestion are welcome. I hope you will like my code. Happy coding :-)
Community feedback
- @darryncodesPosted about 3 years ago
Hi Swan-yee-tun,
Great solution, I think you've created a perfect match to the design - well done!
Some considerations from me:
- add
background-size: 100% auto;
to.main-container
to ensure the background images covers the whole screen on larger screens - add
cursor: pointer;
to your payment and cancel buttons - semantically the buttons should be
<button>
tags - if you change
<div class="main-container">
to<main class="main-container">
you'll fix your accessibility report
All the best!
Marked as helpful1@developedBySwanPosted about 3 years ago@darryncodes Thanks for your feedback and giving time. This help a lot. I will fix ASAP.
0 - add
- @koalalikecodePosted about 3 years ago
It's a great solution. And I think it will be better if you use the main tag in this code:
<div class="main-container">
for make the landmark clearly. And your background-image can use this for 100vw:main-container { background-size: cover;(work with contain too) }
1@developedBySwanPosted about 3 years ago@koalalikecode Thanks this is helpful feedback dude . I will fix it.
0
Please log in to post a comment
Log in with GitHubJoin 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