Four card feature section

Community feedback

• 

  Elaine•11,400

  @elaineleungPosted about 2 years ago

  Hi Luciano, nice work with the changing box shadow on hover! Since Lucas gave you some suggestions (which I cannot read since I don't know Portuguese 😅), I'll try to give you some other ones:

  1. For the title, right now I see that you're using <strong> tags to make the second part bold. If you look at the design again, that part actually goes onto the next line. To do that, change the strong to span, and in the CSS, add this:

       .page_Title span {
         display: block;
         font-weight: 500; // I'm only guessing this is the font-weight; do change it if it's not correct!
     }
     
     

  2. For your cards, I suggest a larger height, such as at least 200px so that it can look closer to the design. More importantly, I notice that you have the same styles on all four cards; you can try having just one card class with the styles that are shared by the four cards and then for the individual styles, you can put that on their individual class.

  3. You can try centering the entire component using display:grid with place-content: center and min-height: 100vh

  Great work, and keep going! 😊

  Marked as helpful

  1
• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Fala Luciano, tudo bem? Parabéns pelo desafio!

  Acabei de ver sua solução e vi que ficou mto bom, o efeito de hover deu um toque espee, bem foda. Uma coisa que vc pode melhorar é a quantidade de divs e substituir a div com <article>.

  Pra deixar os efeitos Hover ativos só em dispositivos não touch, vc pode usar a media query @media (hover:hover) { }

  👋 Espero ter ajudado e continue no foco

  Marked as helpful

  1