Only HTML and CSS

Community feedback

• 

  iduaine12•140

  @iduaine12Posted almost 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 using aria-hidden="true" attribute on the img tag.
  • Learn more should be an a 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 helpful

  2

  ---

  

  Denis de Alencar Ferraz•120

  @DenismapllPosted almost 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

  

  iduaine12•140

  @iduaine12Posted almost 3 years ago

  No worries @Denismapll keep up the good work

  0
• 

  Sönke Martens•120

  @RibosomPosted almost 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 the background-color for example bg-bright-orange, bg-dark-cyan and bg-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 helpful

  1

  ---

  

  Denis de Alencar Ferraz•120

  @DenismapllPosted almost 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
• 

  Parves Hossain Rabby•560

  @IamparvesPosted almost 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 helpful

  1

  ---

  

  Denis de Alencar Ferraz•120

  @DenismapllPosted almost 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