Solucion desarrollada con HTML CSS Flexbox

Community feedback

• 

  P

  Jan Kotvaš•290

  @DrakeHermitPosted 7 months ago

  HTML Wise

  • You need to have at least one h1 in your HTML
  • With the PERFUME part there's a CSS property you can use to make the letters stand further away from each other called letter-spacing
  • Also I would use the <main></main> tag with a class to wrap my content together instead of just using a div.
  • I would also remove the attribution div and the tag within HTML but that's just me, you don't have to do it if you don't feel like it.

  CSS Wise

  • You need to work on making this component responsive which it isn't right now.
  • Don't add fixed width and height on the body selector which adds an overflow bar on the bottom and it doesn't center the whole component whatsoever, if you want to center the whole component use this CSS code

  body {
    display: flex;
    min-height: 100dvh;
    align-items: center;
    justify-content: center;
  }
  

  • You're adding font family to everything basically which isn't really up to DRY standards(Don't repeat yourself), either make a class that adds the font family to a block or use inheritance by setting the font family to the body {} selector. But since this challenge requires you to use two different font families I would go the class route. Also while setting up font-family you want to add a backup if for some reason the font doesn't work. font-family: 'Fraunces', sans-serif for example.
  • Also I would strongly encourage you to make use of CSS variables which makes it so much easier to add a color or anything that needs to repeat in your code. CSS Variables

  Keep on working on your HTML and CSS, Happy coding

  0

  ---

  

  rimar-basaa•30

  @rimar-basaaPosted 7 months ago

  @DrakeHermit muchas gracias, por tus recomendaciones tratare de implementarlos en las proximas soluciones.

  1