Design comparison
Solution retrospective
Please any change need in my Code?
Community feedback
- @Akhlak-Hossain-JimPosted over 2 years ago
First of all good work.
Then for solving accessibility issue, instead of using:
<div class="main_container"> Use <main class="main_container"> In the .main_container instead of using height to 100vh add min-height of 100vh. So on the mobile screen, we can see the full card.Marked as helpful0@codderhmarPosted over 2 years ago@Akhlak-Hossain-Jim Thanks this min-height i've never heard of it. Now it will help me lots in my projects. Thank You very much.
0 - @macdeeshPosted over 2 years ago
Hello Emanuel Hmar,
You need to make some change in the HTML:
1- Your <head> element is missing a required instance, so you must add a <title>.
2- I would recommend using h1 instead of h2, your page should contain a level-one heading.
3- Think about when you use the Web. What do you expect when you see a hover effect? You know something is clickable, right? That means it's an interactive element. Every place you see a hover style, you need to include an interactive element, like an anchor tag or button. So you should wrap the Equilibrium image and the other elements with an anchor tag. That is essential to fix.
4- I would do the hover effect on this using pseudo-elements rather than adding extra in the HTML, but that's not essential. Also, for the other SVG icons you can put it inside pseudo-elements like ::before or ::after, as the icons are all decorative.
5- Font size should never be in px, always rem (or rarely em when you want it to inherit from a parent)
0@codderhmarPosted over 2 years ago@macdeesh Thanks for the comment. I'll try to improve in the next challenge. I always use rem o rem unit in my other project. But this project is a fixed element so for fixed project some one told me to use px rather than em or rem which are responsive properties. So im gonna need help in my next project. Thanks i'll keep in mind. Thank you very much.
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