Licorería Santo Pecado es un sitio web estático de una sola página diseñado para promocionar los productos y la identidad de una licorería. El proyecto está orientado a desarrolladores front-end que deseen aprender o referenciar técnicas avanzadas de CSS3 junto con el sistema de componentes de Bootstrap 5. No requiere back-end, framework de JavaScript ni proceso de compilación: basta con abrirDocumentation Index
Fetch the complete documentation index at: https://mintlify.com/marvinalban30/CSS3-avanzado-y-Bootstrap-5/llms.txt
Use this file to discover all available pages before exploring further.
index.html en cualquier navegador moderno para ver el resultado final.
El sitio combina un tema oscuro de alto contraste con rojo carmesí (#cc0000) y dorado (#ffcc00), animaciones de transición fluidas y una maquetación completamente responsiva, logrando una experiencia visual atractiva con muy pocas líneas de código.
Tecnologías Utilizadas
HTML5
Semántica moderna con elementos como
<header>, <nav>, <main>, <section> y <footer>. El documento declara lang="es" y viewport adaptable para dispositivos móviles.CSS3 Avanzado
Hoja de estilos personalizada (
styles.css) que aplica transition, transform: scale(), box-shadow con canal alfa, text-shadow y una paleta de colores fijos para el tema oscuro.Bootstrap 5
Versión 5.3.3 cargada vía CDN. Se utilizan el sistema de grid (
col-md-4), componentes Navbar, Card, Button, Collapse y clases utilitarias de espaciado y tipografía.Características Principales
A continuación se detallan las funcionalidades clave identificadas directamente en el código fuente del proyecto:- Diseño responsivo con Bootstrap 5 grid — La sección de productos usa
row g-4con columnascol-md-4, adaptándose de una columna en móvil a tres columnas en pantallas medianas y superiores. - Animaciones CSS3 (
transition,transform: scale) — Los botones.btn-primaryy las cards.cardaplicantransition: all 0.3s ease-in-outcombinado contransform: scale(1.05)yscale(1.02)respectivamente en el estado:hover. - Navbar sticky con colapso en móviles — La barra de navegación usa
navbar-expand-md sticky-topde Bootstrap. En pantallas pequeñas se oculta y se activa mediantedata-bs-toggle="collapse"apuntando a#navbarNav. - Cards de productos con hover glow — Al pasar el cursor sobre una card, se aplica
box-shadow: 0 0 15px rgba(255, 0, 0, 0.3), generando un halo rojo característico del branding de la tienda. - Formulario de contacto con estilos oscuros y foco en
#ff0000— Los campos<input>y<textarea>tienen fondo#222y borde#ffcc00. Al recibir foco, el borde cambia a#ff0000con unbox-shadow: 0 0 5px rgba(255, 0, 0, 0.6). - Sección de promociones colapsable — Un botón con
data-bs-toggle="collapse"ydata-bs-target="#promo"controla la visibilidad de un panel oscuro que muestra la promoción del mes, sin JavaScript adicional. - Tema oscuro completo — El cuerpo del documento tiene
background-color: #000ycolor: #fff. Los encabezados (h1,h2,h3) se renderizan en#ffcc00context-shadow, y los botones primarios usan#cc0000como color base.
Estructura de Secciones
El documento HTML está organizado en tres grandes bloques visuales: Encabezado y navegación El<header> muestra el nombre del negocio y su eslogan (“Tu tentación favorita en cada copa”) sobre fondo oscuro. Inmediatamente debajo, el <nav> sticky permanece visible durante el scroll y provee acceso rápido a las secciones internas de la página.
Contenido principal (<main>)
Contiene tres secciones independientes dentro de un contenedor Bootstrap con padding vertical (py-5):
- Productos — galería de tres cards con imagen, nombre y descripción de cada licor.
- Contacto — formulario con validación HTML5 nativa (
required) para nombre, correo electrónico y comentarios. - Promociones — panel desplegable accionado por un botón, que revela la oferta vigente.
<footer>)
Muestra el copyright del año 2025 y enlaces a las redes sociales Facebook e Instagram, estilizados en rojo (#ff0000) con subrayado al pasar el cursor.