Design comparison
Solution retrospective
If anyone has any tips I would love to hear
Community feedback
- @iduaine12Posted about 3 years ago
Hi @Denismapll great design, just a few suggestions:
- The car icons should have
aria-hidden="true"
, because they are for decoration. Decorative image must be hidden at all times by usingaria-hidden="true"
attribute on the img tag. Learn more
should be ana
tag, since it will likely to be a link rather than button in an actual website.- I recommend adding
transition: all 0.2s;
to the button and the links, this will make:hover
smoother.
Hope the notes from the above help, great work
Marked as helpful2@DenismapllPosted about 3 years ago@iduaine12 Thanks for the tip buddy, I didn't even know about this aria-hidden function, I went deeper and this is very important, the transitions too, I didn't know how to do it, I'm studying from complete zero, your comment was very helpful, thank you very much
0 - The car icons should have
- @RibosomPosted about 3 years ago
Hi @Denismapll, nice solution!
One idea for your css. I would do one
container
class for the stuff the three container share and then three different classes only for thebackground-color
for examplebg-bright-orange
,bg-dark-cyan
andbg-very-dark-cyan
.In the html you could then do for example
<div class="container bg-bright-orange">
.This has the advantage, that if you have to change the css of the container, you don't have to change it three times. Instead of making three button classes button1, button2, button3, you could use the same principle and add the different colors via descendant combinator:
.bg-bright-orange .button { color: var(--cc-bright-orange); }
Marked as helpful1@DenismapllPosted about 3 years ago@Ribosom Yes, I realized that in the other project I'm doing now haha, while I was doing this one, it didn't even cross my mind, I had no idea that I could take one component from within the other for example: .container1 > button {} now I've learned this, thanks a lot for the tips.
1 - @IamparvesPosted about 3 years ago
Hi, you did a good job. There are few details I would like to point out.
- The headings font looks different from the origial design.
- You should use
border-radius
for the cards wrapper. - It would look better if you add transition for button hover effect and change the cursor:
cursor: pointer;
- When the screen size is smaller than 900px the cards takes full width. You should give a little space around the cards (left/right)
- You should center the cards for smaller device (tab/mobile)
Marked as helpful1@DenismapllPosted about 3 years ago@Iamparves thanks for the tips bro, when i was doing this challenge i had some problems to centralize on mobile, but dps reading your tips i managed to think of a solution!
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