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-main

Esteban Salas• 80

@Geo0510

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


Hi everyone,

I've completed profile card component challenge. Any feedback or suggestion will be very considered and helpful.

Thank you all.

Community feedback

Danilo Blas• 6,300

@Sdann26

Posted

Hola Esteban!

El diseño esta bien, solo un detalle es el texto. El nombre y los números tenían un color como azul marino oscuro, en el archivo style-guide.md debería salirte el color exacto.

Por cierto tambien si usas el navegador firefox al darle a inspeccionar o al F12 te saldrá un recuadro con el código, abajo del X puedes ver un tintero que sirve para ver el color de cualquier página. Tambien puedes usar el siguiente link https://imagecolorpicker.com/es que te permite subir imagenes y con el puntero puedes encontrar el color del pixel y mucho más opciones.

Una ultima recomendación si puedes escribe todo tu código en ingles o en español no mezcles idiomas porque se ve más organizado, es una recomendación personal aparte así practicas el ingles.

Buen proyecto, te mande solicitud en linkedin, suerte!

Marked as helpful

0

Esteban Salas• 80

@Geo0510

Posted

@Sdann26 Gracias por las recomendaciones danilo las tendre muy en cuenta :)

1
Benjo Quilario• 1,810

@benjoquilario

Posted

Hi Geo0510, great job on finishing this one, it looks good.

some suggestion :

  • I've also been at this place where you want to use the <img> tags instead of using a background image.(feels like it would be more flexible) But I realized, the custom changes you can make with background images are way more than <img> tags...so I would suggest you to use them.
 background-image: url('images/bg-pattern-card.svg');
  • You need to change the width of .card_container into width: 100%, and add a max-width: 400px;, so that it will shrink when the viewport is 400
  • You also need to change that body background into background images. if you find it tough you can always check at my solution here: https://www.frontendmentor.io/solutions/html-csssass-hbRxlzWFH

Goodluck and keepcoding.

cheers, benjo

Marked as helpful

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