Crear una tarjeta de visita visualmente atractiva

Introducción

En este proyecto, aprenderás a crear una tarjeta de visita de usuario con HTML y CSS. El objetivo es crear una tarjeta de visita visualmente atractiva y bien estructurada que se pueda utilizar para mostrar la información de un usuario.

👀 Vista previa

🎯 Tareas

En este proyecto, aprenderás:

• Cómo configurar el proyecto y abrir los archivos necesarios
• Cómo centrar los elementos de la tarjeta y la imagen del usuario utilizando CSS
• Cómo centrar horizontalmente los elementos de texto de la izquierda (nivel y puntos)

🏆 Logros

Después de completar este proyecto, podrás:

• Estructurar una página HTML para una tarjeta de visita
• Utilizar CSS para dar estilo y posicionar elementos en la página
• Aplicar técnicas para centrar elementos horizontal y verticalmente

Configurar el proyecto

En este paso, configurarás el proyecto y abrirás los archivos en el editor.

Abre la carpeta del proyecto, que contiene los siguientes archivos y directorios:

├── avatar.png
├── style.css
└── index.html

Aquí:

• index.html es la página principal.
• style.css es el archivo donde debes agregar los estilos necesarios.

Haz clic en el botón Go Live en la esquina inferior derecha de WebIDE, para ejecutar el proyecto.

Luego, abre "Web 8080" en la parte superior de la VM y actualízala manualmente y verás la página.

Centrar la tarjeta y la imagen del usuario

En este paso, completarás la sección TODO en style.css para centrar los elementos de la tarjeta y la imagen del usuario.

1. Localiza la sección TODO en el archivo style.css.
2. Agrega las reglas CSS necesarias para centrar horizontal y verticalmente los elementos de la tarjeta (clase = card) y la imagen del usuario (clase = avatar).

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

3. Guarda los cambios en el archivo style.css.
4. Actualiza el navegador para ver el resultado final, el resultado final es el siguiente:

¡Felicitaciones! Has completado con éxito el proyecto de Tarjetas de visita de usuario.

Resumen

¡Felicitaciones! Has completado este proyecto. Puedes practicar más laboratorios en LabEx para mejorar tus habilidades.