@Sdann26
Posted
Raul, que tal!
Un truquito para centar los elementos sin necesidad de hacer con margenes o position es usando flex y al ver que la tarjeta para puntuar esta en el medio puedes hacerle lo siguiente al body, agregale estos atributos:
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 2em;
min-height: 100vh;
Obviamente tendrías que quitarle al div con la clase attributión el position y a la tarjeta los margenes.
Además mete los dos div que hay dentro del body dentro de la etiqueta <main>, siempre debes añadir esta etiqueta y ponerle el contenido principal de tu página. Por otro lado cambia el h2 por un h1, el motivo es porque toda página debe tener un h1 y además al colocar h2 a más debe ir siempre de manera incremental, como si fueran subtitulos ya que lo son, usalos como eso más que para agregar un tamaño o algo similar.
Te recomiendo revisar el reporte y mientras más vayas arreglando los cambios actualizalo para ver si siguen los errores y así limpias el reporte ya que ayuda a no cometer esos errores.
Por cierto el diseño te ha quedado bastante bien agregale a los efectos de los botones transiciones para que el cambio de color no sea brusco por ejemplo transition: all 200ms :D
Good Coding!
