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

3-column preview card component

@Geeraldv

Desktop design screenshot for the 3-column preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Card preview using css grid and flexbox

Community feedback

@Kamasah-Dickson

Posted

You nailed it I really like your solution. Spacing is great, texts are also readable.

Good job 👍

Marked as helpful

0

@Geeraldv

Posted

@Kamasah-Dickson Thanks for your review.✌🏻

0
Danilo Blas 6,300

@Sdann26

Posted

Buen trabajo Geraldo, la transción esta bastante bien y bien aplicado las media queries. Podrías mejorar un poco el diseño si le das menos padding en la parte de arriba y abajo y haciendo que los titulos queden un poco más grande en cada card.

Respecto al reporte, el div con la clase container lo puedes cambiar por un main y ya solo quedaría ponerle un h1 dentro del main con el titulo que quieras. Al h1 basta que le agregues la clase sr-only que significa (Screen Reader Only) que hará que no se vea en tu diseño pero este presente. La clase tendrás que darle los siguientes atributos:

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

Ya con esto no debería salirte ningun error en el reporte cuando generes uno nuevo y utiliza este truco en otros proyectos donde lo necesites. En realidad esto sirve para que al usar un lector de pantalla este detecte el texto (puede que sea un texto más explicativo que no quieras que se vea en el diseño final de la página) y lo lea para gente invidente.

Igualmente muy buen acabado, éxitos!

Marked as helpful

0

@Geeraldv

Posted

@Sdann26 Muy buena reseña voy a intentar aplicar lo que explicas, gracias!!

1

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