Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive section cards using HTML5, CSS3, Flexbox and Grid Layout.

@Dumont19

Desktop design screenshot for the Four card feature section coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

Lucas 👾 104,420

@correlucas

Posted

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

Aqui umas dicas pra melhorar sua solução:

Pra ter o alinhamento perfeito verticalmente ficou faltando min-height: 100vh

body {
    min-height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-poppins);
    font-size: 15px;
    overflow-x: hidden;
}

O valor da sombra do componente está um pouco forte, você pode melhorar isso colocando menos opacity e mais blur, aqui um valor bom pra essa sombra: box-shadow: 3px 5px 12px 5px rgb(0 0 0 / 5%);

👋 Espero ter ajudado e continue no foco!

Marked as helpful

0

@Dumont19

Posted

@correlucas Muito obrigado. Assim que eu puder, vou atualizar a solução com as suas observações.

1
Lucas 👾 104,420

@correlucas

Posted

@Dumont19 Beleza, perfeito irmão, eu posso analisar suas outras solucoes tbm? Caso vc deixa eu deixo algum comentario nas outras.

0

@Dumont19

Posted

@correlucas Claro, irmão, fica à vontade. É sempre bom ter opiniões e receber dicas para melhorar. Ainda tenho um caminho longo pela frente.

0

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