Aquí puedes ver recursos del resultado del ejercicio →
Ejercicio: Tarjeta de usuario
Nombre repo:basic-card

Crea una tarjeta básica de perfil de usuario, donde aparezcan algunas stats de redes sociales.

Descripción

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.

  • 1️⃣ La tarjeta debe incorporar una fotografía/avatar del usuario.
  • 2️⃣ La tarjeta tendrá una parte superior con una imagen de decoración de fondo.
  • 3️⃣ Los datos del usuario: Nombre, lugar de residencia, descripción, y enlace «Follow» a Twitter.
  • 4️⃣ El footer debe mostrar el texto con un número de mensajes, seguidores y seguidos, con su icono.
  • 5️⃣ La estructura y posición de los elementos debe ser lo más similar al de la imagen.

Recursos

  • Tamaño de la card: 450x600px aprox.
  • Colores de fondo:
  • Otros colores:
  • Tamaño de avatar: 128x128px aprox.
  • Tamaño de fotografía: 300x200px aprox.
  • Tipografías: Poppins, Montserrat.

Links

Volver

Demos desde cero

En mi canal de Youtube encontrarás demos y ejercicios desde cero:

Videos de Youtube

En mi canal de Youtube encontrarás videos con conceptos de desarrollo web:

Dibujos con CSS

Estos dibujos que tenemos a continuación están hechos con CSS... ¿No te lo crees?

Más Dibujos con CSS.

¿Quién soy yo?

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