Submitted almost 2 years ago
Four card feature section - Css Grid & Flexbox
@bilalturkmen
Design comparison
SolutionDesign
Solution retrospective
I used css grid-area property for laying out cards. it seems more comfortable. 😉
- Dark mode added
Community feedback
- @VCaramesPosted almost 2 years ago
Hey there! 👋 Here are some suggestions to help improve your code:
- This LINK is not needed ⚠️.
- The “Reliable, efficient delivery Powered by Technology” is one single heading ⚠️ so the entire thing should be wrapped in a single
h1
heading and either the top/bottom text will have aspan
element.
- Avoid skipping heading levels ⚠️. Always start with the
h1
(which can only be used once) and you will go down the hierarchy level depending on the heading’s level of importance.
- The “icons” in this component are purely decorative⚠️. Their
alt tag
should be left blank to hide them from assistive technology.
More Info:📚
https://www.w3.org/WAI/tutorials/images/
- To properly center ✅ your content to your page, you will want to add the following to your
body
(this method uses CSS Grid):
body { min-height: 100vh; display: grid; place-content: center; }
More Info: 📚
If you have any questions or need further clarification, you can always check out my submission and/or feel free to reach out to me.
Happy Coding! 🤖
Marked as helpful1@bilalturkmenPosted almost 2 years ago@vcarames hi thank you for the review. I made the edits you mentioned and i added dark mode ✅ it got better. thanks 🙂
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