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-main using CSS &BEM

Monica 260

@Monica-MR

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

Community feedback

Danilo Blas 6,300

@Sdann26

Posted

Buenas Monica!

Una pequeña recomendación utiliza el atributo transition para agregar un efecto de suavizado de un estado inicial a uno final, por ejemplo en los botones podías agregarle transition: all 300ms; en la clase card__btn.

Por otro lado para saltarte el error puedes ponerle un h1 dentro del main con la clase .sr-only

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

Esta clase hace que desaparezca el h1 del flujo osea que no aparezca en pantalla pero que este presente en la página. Con esto ya no te saltaría ningún error y podría generar un nuevo reporte en la página.

Buena suerte con tus proyectos :D!

Marked as helpful

0

Monica 260

@Monica-MR

Posted

@Sdann26 Muchas gracias por la recomendación del H1. No se me hubiera occurrido algo así. Lo tendré en cuenta para este y futuros proyectos que suba por aquí.

Saludos!

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