Single Price grid component master

Community feedback

• 

  Saul•1,260

  @xsaulPosted over 2 years ago

  Hello Veronica, you did a nice job! I think the button's shadow should be with less opacity maybe 30%-35% would be better. Also, you should put the bottom section inside the same div and display it with flex or grid instead of displaying it as 2 different sections. And remember always add a hover effect and cursor pointer to the buttons. By the way, I tried to look at your repository and it says the site isn't available so you should check about it.

  0
• 

  Danilo Blas•6,300

  @Sdann26Posted over 2 years ago

  Hola Vero!!

  Felicitaciones por acabar este cuarto reto, te daré algunas recomendaciones.

  Si puedes nunca centres con margin ya que puede que en tu pantalla se vea centrado pero en otras no ya que verticalmente no lo va estar. Si quieres centrar un elemento al medio de la pantalla puedes hacer lo siguiente:

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

  Lo que estoy haciendo es darle al body que es la caja padre el tipo flex y deacuerdo a eso, coloco los elementos en dirección vertical y los centro en ambos ejes. Al final le coloco un min-height que es una altura mínima por si sobrepasa esta de 100vh que significa 100% del viewport height (El viewport es la pantalla y bueno height es por la altura de la pantalla entonces tomo toda la altura). Así siempre la centrará verticalmente bien.

  Tambien por un tema de accesbilidad te recomendaría cambiar

  <p class="last-paragraph">
          Tutorials by industry experts
          Peer & expert code review
          Coding exercises
          Access to our GitHub repos
          Community forum
          Flashcard decks
          New videos every week
  </p>
  

  Por algo como:

  <ul>
            <li>Tutorials by industry experts</li>
            <li>Peer & expert code review</li>
            <li>Coding exercises</li>
            <li>Access to our GitHub repos</li>
            <li>Community forum</li>
            <li>Flashcard decks</li>
            <li>New videos every week</li>
  </ul>
  

  Ya que al final son una lista de elemento desordenados (unorder list <ul>) por lo cual así además de darle los estilos para que cada uno salga linea por linea semánticamente es mejor que usar un parrafo y todo salga como una linea.

  Aplica esos cambios y creo que tu código puede mejorar obviamente tendrás que ver como darle los estilos o te puedes guiar del reto que ya he hecho, sea como sea espero que mis comentarios te ayuden a mejorar un poco :D!

  0