Se pide desarrollar una tarjeta de usuario con los datos del desarrollador en HTML/CSS nativo. Si no se te ocurren tus propios datos, puedes usar los datos de la imagen de ejemplo.
Si no lo has leído aún, echa un vistazo al ¿Cómo empezar?, un documento donde damos algunas pautas para comenzar, y un listado de recursos, sitios webs o herramientas que te ayudarán en tu proceso.
manzdev-retos-basic-card
🐈 Crea tu repo ❓ ¡Ayuda! ¿Cómo empezar?450x600px
aprox.128x128px
aprox.300x200px
aprox.Poppins
, Montserrat
.Puedes intentar partir de una estructura similar a esta (no olvides luego pasarla a etiquetas semánticas):
<div class="card">
<div class="hero-image">
...
</div>
<div class="card-content">
...
</div>
<div class="footer">
...
</div>
</div>
Flex es un mecanismo que se suele utilizar para estructuras de una sola dimensión. Si no sabes como continuar, intenta crear contenedores de una dimensión unos dentro de otros con Flex CSS. No tengas miedo de crear contenedores y recuerda que flex se aplica directamente al/los elementos hijos.
Quizás lo más fácil para diseñar esa imagen de fondo es utilizar gradientes. Una imagen de fondo múltiple podría venir muy bien.
Si utilizamos iconos SVG y colocamos el código en el HTML (no en un <img>
), podremos hacer cambios en los iconos desde CSS. Puedes utilizar propiedades como fill
(color de relleno), stroke
(color de trazo) o width
y height
.
Soy Manz, vivo en Tenerife (España) y soy streamer partner en Twitch y profesor. Me apasiona el universo de la programación web, el diseño y desarrollo web y la tecnología en general. Aunque soy full-stack, mi pasión es el front-end, la terminal y crear cosas divertidas y locas.
Puedes encontrar más sobre mi en Manz.dev