Design comparison
SolutionDesign
Solution retrospective
Hi there 👋, I’m Danil and this is my solution for this challenge. 🚀
⚡ Performance:
90%-100% on lighthouse report and PageSpeed Insights. 🏆
🛠️ Built With:
- Semantic HTML5 markup ✔️
- Flexbox ✔️
- Media queries ✔️
👨💻 Languages Used:
- HTML ⚙️
- CSS (Vanilla) 🎨
Any suggestions on how I can improve and reduce unnecessary code are welcome!
Thank you. 🔥
Community feedback
- Account deleted
Very nice work ✨, Congratulations
You can follow these steps to change the button to be like the right design:
- give it
width: 100%;to expand the button to the whole parent's width. - give it
padding: 14px 0;to give ot padding in the top and bottom of the button. - give it
text-align: center;to align the icon and the text to the center of the button.
another tip:
- use HTML5 semantic tags instead of
<div>tags (such as<main>,<section>, etc...) . - you can use
<picture>tag to create media query for the image sources without css.
Good luck in the next 🔥, keep going on
Marked as helpful1@Rock-n-Roll-CRCPosted over 1 year agoThank you so much! You're the saviour :D @MasterMousa
1Account deleted@Rock-n-Roll-CRC you're welcome
1 - give it
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