The responsive four card flex properties.

Please log in to post a comment
Log in with GitHubCommunity feedback
- Account deleted
Hey there! 👋 Here are some suggestions to help improve your code:
- To center you content to your page, add the following to your Body Element:
body { min-height: 100vh; display: grid; place-content: center; }
- To give your HTML code structure, you want to set up your code in the following manner:
<body> <header></header> <main> <section> <div class="supervisor-card"></div> <div class="team-card"></div> <div class="karma-card"></div> <div class="calculator-card"></div> </section> </main> </body>
The Header Element represents introductory content.
The Main Element identifies the main content of the document.
The Section Element can be used to wrap content that is related to each other.
And since none of the cards make sense on their own, a simple Div will do for each card.
-
The “Reliable, efficient delivery Powered by Technology” is one single heading so the entire thing should be wrapped in a single <h1> Heading along with a Span Element.
-
The icons serve no other purpose than to be decorative; They add no value. There Alt Tag should left blank and have an aria-hidden=“true” to hides it from assistive technology.
If you have any questions or need further clarification, let me know.
Happy Coding! 👻🎃
- @Harikrishnasinh
Thanks For Your feedback !!! I will work on that...
- @AdrianoEscarabote
Hi Code In Peace, how are you?
I really liked the result of your project, but I have some tips that I think you will enjoy:
- every Html document must contain the main tag, so we can identify the main content, to fix this, wrap all the content with the main tag. HTML5 landmark elements are used to improve navigation experience on your site for users of assistive technology.
- To improve the accessibility of the project you could have put an h1. Every page must contain a level 1 header, for people who use screen readers, identity what the main title is.
The rest is great!
I hope it helps... 👍
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