3-column-preview-card-component-main

Community feedback

• 

  T

  Grace•30,990

  @grace-snowPosted over 3 years ago

  Hi

  Looks nice, just a few issues with the html

  • remove empty ids
  • you can only have one h1 per page
  • those buttons should be anchor tags

  If you place transparent border on the buttons nothing will move when you click them and the white border appears. A small thing but nice to stop that little jump

  Hope these help. Nice work!

  1

  ---

  

  Chevalier Antoine•670

  @SeyBooPosted over 3 years ago

  Hey thanks for your report i completly forget too remove the id ^^.

  I wasn't know for the h1 i make them h2 instead.

  I thought that a button was more easy to style

  0

  

  T

  Grace•30,990

  @grace-snowPosted over 3 years ago

  @SeyBoo it's not about styling it's about semantics. Buttons are for actions like opening a modal, submitting a form etc, making a change to data or the dom on current page. Anchor tags are for navigation.

  In this case, learn more would almost certainly be an anchor tag (link)

  I hope that clarifies

  2

  

  Chevalier Antoine•670

  @SeyBooPosted over 3 years ago

  Oh okay thanks you i really dont thinks about it !

  It's updated and i know that for my future project thanks a lot !

  0
• 

  Rayane•1,935

  @RayaneBengaouiPosted over 3 years ago

  Hello Chevalier Antoine,

  Congrats for completing the challenge ! 😁

  I'd like to suggest :

  • When hovering your buttons, the content is pushed away and the card extends. It's because you add a border to the button when it originally doesn't have one. The border is part of the 'Box-model', so to avoid this behavior you could add border: solid 2px hsla(0, 0%, 100%, 0.75) to your buttons.

  • Here in the design the text is spaced, you could do this by using the property line-height.

  • Also, you could add the property transition to your buttons to make the transition smoother and cursor: pointer to make them look clickable.

  Overall, well done for the challenge and happy coding ! 😃

  1

  ---

  

  Chevalier Antoine•670

  @SeyBooPosted over 3 years ago

  @RayaneBengaoui Hey thanks for your return !

  Good idea for the border i fixed it thanks !

  I add more line-height 1.25rem -> 1.5rem.

  For the button i forgot to add the cursor ^^. And for the animation good idea i wasn't on the design so i dont dare to do.

  0