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

Html, Css , semântico e responsivo..

@Paulo-Borges

Desktop design screenshot for the Blog preview card coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Mas um Código.... Me ajudem a melhora-lo.... Por falta de um ponto, estava dando ERRO.. Mas agora esta aqui.... Vamos melhorar esse Código...

Community feedback

Daniel 🛸 44,270

@danielmrz-dev

Posted

Fala Paulo!

Seu projeto ficou ótimo!

Tenho algumas dicas pra você melhorá-lo:

  • Use sempre a tag main pro conteúdo principal ao invés de div. É uma mudança que não gera impacto visual, mas torna seu código HTML mais semântico e melhora a otimização SEO e a acessibilidade do projeto.

Espero que ajude! 😊

0
abedzeidan 340

@Abed001

Posted

Hi Paulo Borges good job on finishing this project it looks great, although I have two suggestions, the first one is to try to use h-screen or height of 100vh to make the yellow color go through all the screen because there is still white space on top and bottom. and second, you have to add active states when hovering the card not just on the text try to use this in your CSS:

.cardshadow{ box-shadow: 10px 10px rgba(0,0,0);

} .cardshadow:hover { box-shadow: 15px 15px rgba(0, 0, 0); /* Increase shadow size and opacity on hover */ } keep going!!

0

@Blackpachamame

Posted

¡Saludos Paulo! te ha quedado genial 😎

Solo puedo comentarte que para centrar el contenido podes usar flex o grid, te mostrare como quedaría tu código aplicando grid:

body {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    font-family: 'Figtree', sans-serif;
    background: hsl(47, 88%, 63%);
    min-height: 100vh;
    display: grid;
    place-content: center;
}
  • Con estos cambios, ya no necesitas el div con la clase base así que podrías eliminarlo y dejar el resto
  • Como detalle extra, puedes aplicar display: block a tu img, esto eliminará el espacio en blanco que se genera por debajo de la imagen
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