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

Single Price grid component master

@veronicajujuy

Desktop design screenshot for the Single price grid component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


This is my fourth challenge, I would be grateful if you could give me feedback

Thank you!!

Community feedback

Saul 1,260

@xsaul

Posted

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

@Sdann26

Posted

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

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