Html, Css , semântico e responsivo..

Community feedback

• 

  Daniel 🛸•44,310

  @danielmrz-devPosted 11 months ago

  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

  @Abed001Posted 11 months ago

  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
• 

  Marcos Travaglini•4,840

  @BlackpachamamePosted 11 months ago

  ¡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