Design comparison
Community feedback
- @ab1820Posted almost 2 years ago
Hey lady!!! :) I just wanted to point out the border-radius around your card! Otherwise it looks awesome and I think I may try this challenge next! :P
Marked as helpful0@nbuyldingPosted almost 2 years ago@ab1820 omg I didn't even notice that, it's so subtle (or I'm blind) :D Thanks!
0 - @HassiaiPosted almost 2 years ago
Wrap the three divs in the main tag. there is no need to add <a> after the button to make the cursor a pointer but rather give it a class for the styling.
To center a content on a page, add min-height:100vh; to the body and remove the height value and the width value in the body. there is no need to give the body a padding value
Give the main display : flex ; and a width value that sum of the width value if the three divs.
Give .sedans , .luxury and .suvs a width value and padding value instead of the height value for a more responsive site. Give the button of each div a font color that is the same as the background-color of the div, a background-color of transparent and a font-weight of 700;
In the media query give the main a width of 80% and flex-direction: column
Hope am helpful HAPPY CODING
Marked as helpful0 - @VCaramesPosted almost 2 years ago
Hey there! 👋 Here are some suggestions to help improve your code:
To not only improve your HTML code but to also identify the main content of you page, you will want to wrap your entire component inside the
main
element.More Info:📚
The “car images/icons” in this component are purely decorative; They add no value. So their
Alt Tag
should be left blank and have anaria-hidden=“true”
to hide them from assistive technology.More Info:📚
https://www.w3.org/WAI/tutorials/images/
- The headings in your component are being used incorrectly. Since the
h1
heading can only be used once, it is always given to the heading with the highest level of importance. This component has three headings of equal importance, so the best option would be to use anh2
heading since it is reusable and it will give each heading the same level of importance.
- Your "buttons" were created with the incorrect element. When the user clicks on the button they should be directed to a different part of you site. The
anchor tag
will achieve this.
More Info:📚
If you have any questions or need further clarification, feel free to reach out to me.
Happy Coding!🎄🎁
0 - The headings in your component are being used incorrectly. Since the
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