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

Profile-card-component

Jorge 130

@JorgeIturrieta

Desktop design screenshot for the Profile card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I really found diffucult how to put two images as a background (url(),...,url()). Finally i diceded put them with pseudo elements before and after .

Any feedback is welcome! Thanks.

Community feedback

Danilo Blas 6,300

@Sdann26

Posted

Buen trabajo Jorge!! Te ha quedado casi perfecto, la tarjeta es un poco más ancha pero en lo personal haz concluido bien el diseño.

Haz usado bien la semantica de las etiquetas sin embargo debes agregar un h1 en tu página ya que toda página siempre lleva un h1. Si quieres un truco para agregarlo pero que no se vea y aun así lo detecte la página es ponerle al h1 la clase sr-only.

A sr-only le das los siguientes atributos en CSS:

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

Lo que hará esto es desaparecerlo del flujo pero que aun así este en el proyecto. Esto se suele usar más para temas de accesibilidad como para que al pasar un lector de pantalla lea un texto explicativo pero que no se vea desde la web, si quieres más información busca sobre accesibilidad en la web.

Por ultimo podrías descargarte la extensión AxeDev Tools, esta extensión la uso actualmente bastante para ver si hay problemas en mi código respecto a accesibilidad, desde etiquetas que le falten algún atributo, contraste de colores que no se notan, etc.

Marked as helpful

0

Jorge 130

@JorgeIturrieta

Posted

@Sdann26 Muchas gracias por el consejo Danilo! Lo tendré en cuenta

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