CSS Exercises 🎨

Repositorio con mis proyectos de CSS mientras aprendo desarrollo web. Aquí practico conceptos fundamentales como Flexbox, responsive design, efectos visuales y buenas prácticas de CSS.

📁 Estructura del Proyecto

css-exercises/
├── 01-tarjeta-perfil/          # Tarjeta de perfil con gradiente
├── 02-landing-page/            # Página de inicio completa
├── 03-menu-flexbox/            # Navegación horizontal y responsive
└── 04-galeria-productos/       # Galería con grid responsive

🎯 Conceptos Practicados

• Flexbox - Alineación, distribución, flex-direction
• Responsive Design - Media queries, adaptación a móvil/tablet/desktop
• Box Model - Margin, padding, border, content
• Gradientes - Linear-gradient con múltiples colores
• Efectos Hover - Transiciones suaves, transforms
• Grid & Layout - Organización de contenido
• Buenas Prácticas - Código limpio, semántica HTML

📱 Proyectos

1. Tarjeta de Perfil

• Foto circular con borde
• Información personal
• Gradiente naranja-amarillo
• Efectos hover en botón

2. Landing Page

• Header con navegación
• Hero section con gradiente
• Sección de servicios (3 tarjetas)
• Formulario de contacto
• Footer con redes sociales

3. Menú de Navegación

• Logo a la izquierda
• Menú centrado
• Botón Sign Up a la derecha
• Responsive (vertical en móvil)

4. Galería de Productos

• 6 productos en grid
• 3 columnas (desktop) → 2 (tablet) → 1 (móvil)
• Tarjetas con precio y botón
• Efectos hover con elevación

🚀 Cómo Ver los Proyectos

Clona el repositorio y abre cualquier carpeta:

git clone https://github.com/userCr1dev/css-exercises.git
cd css-exercises/01-tarjeta-perfil
# Abre index.html en tu navegador

📚 Lo que Estoy Aprendiendo

✅ HTML semántico ✅ CSS Flexbox ✅ Responsive design ✅ Efectos y animaciones ✅ CSS Grid ⏳ JavaScript

👨‍💻 Autor

Cristian Mamani - Estudiante de Programación

---

Última actualización: [04-11-2025]