Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Request path contains unescaped characters
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Four card feature section

@LucianoOliveira1

Desktop design screenshot for the Four card feature section coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


EN: This is my solution for the Four card feature section challenge. Feel free to leave any feedback about the solution or the code! Thank you very much in advance!

Different from the initial proposal of the project, I decided to add a hover on each card, changing the color to the same color as the one at the top of the card!

PT: Esta é a minha solução para o desafio Four card feature section. Sinta-se à vontade para deixar qualquer feedback sobre a solução ou sobre o código! Desde já, muito obrigado!

Diferente da proposta inicial do projeto, eu resolvi adicionar um hover em cada cartão, alterando a cor para a mesma que esta no topo do cartão!

Community feedback

Elaine 11,400

@elaineleung

Posted

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,420

@correlucas

Posted

👾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

Please log in to post a comment

Log in with GitHub
Discord logo

Join 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