Este proyecto consiste en el desarrollo de una Landing Page responsiva para una marca ficticia de cosmética natural basada en rituales japoneses. El objetivo principal fue crear una interfaz elegante, accesible y funcional que refleje los valores de sostenibilidad y tradición de la marca.
INARU es una plataforma web diseñada para captar clientes interesados en la cosmética consciente. La página incluye secciones informativas sobre los principios de la empresa, el equipo de expertos y un formulario de suscripción para fidelizar usuarios.
Se puso especial énfasis en la estética minimalista y el uso de diseño responsivo para garantizar una experiencia óptima en cualquier dispositivo.
Vista Desktop: 
Vista Móvil: 
Para este desarrollo se utilizaron tecnologías web estándar, priorizando la semántica y el rendimiento:
HTML5 Semántico: Uso de etiquetas como
, ,CSS (Custom Properties): Implementación de variables CSS para gestionar una paleta de colores coherente y un sistema de espaciado dinámico.
Flexbox & CSS Grid: * Grid para la sección de "Beneficios" y el "Equipo", permitiendo una distribución multilineal limpia.
Flexbox para la barra de navegación y la alineación de elementos internos en las tarjetas.
Diseño Responsive: Uso de Media Queries y la función clamp() para tipografía fluida que se adapta sin saltos bruscos entre tamaños de pantalla.
Accesibilidad (A11y): Inclusión de atributos aria-label, role y gestión de estados :focus para asegurar que la navegación sea posible mediante teclado y lectores de pantalla.
Durante el desarrollo de este proyecto de clase, reforcé conceptos clave:
Arquitectura CSS: Cómo organizar un archivo de estilos utilizando una sección :root para centralizar el diseño.
Imágenes de fondo y Hero: Manejo de background-size: cover y superposición de texto sobre imágenes asegurando la legibilidad.
Formularios funcionales: Estructuración de formularios con fieldset, legend y validación básica de campos.
Optimización de recursos: Importancia del uso de object-fit: cover para que las imágenes del equipo mantengan su relación de aspecto en contenedores circulares.
Interactividad con JavaScript: Programar la funcionalidad real del "botón hamburguesa" para que el menú móvil se despliegue (actualmente preparado en HTML/CSS).
Animaciones: Añadir efectos de scroll reveal o transiciones más suaves en los botones.
Optimización de Imágenes: Implementar formatos de nueva generación como .webp para mejorar los tiempos de carga.