<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HAOBAC | Cyber & Café HAOBAC</title>
<style>
/* Importando fuentes elegantes */
@import url('https://www.dafont.com/es/birds-of-paradise.font');
:root {
--bg-color: #FDFBF7;
--text-color: #2C1E16;
--accent-color: #A67C52;
--header-bg: #1A120B;
}
/* Scroll suave para toda la página */
html {
scroll-behavior: smooth;
}
body {
font-family: 'Birds of Paradise', sans-serif;
background-color: var(--bg-color);
color: var(--text-color);
margin: 0;
padding: 0;
line-height: 1.6;
overflow-x: hidden;
}
h1, h2, h3 {
font-family: 'Playfair Display', serif;
font-weight: 700;
}
header {
background-color: var(--header-bg);
color: #fff;
padding: 15px 50px;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 4px solid var(--accent-color);
position: sticky; /* El menú te sigue al bajar */
top: 0;
z-index: 1000;
box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}
.logo-container {
display: flex;
align-items: center;
gap: 15px;
}
.logo-img {
width: 50px;
height: 50px;
border-radius: 50%;
object-fit: cover;
border: 2px solid var(--accent-color);
transition: transform 0.3s ease;
}
/* Efecto al pasar el mouse por el logo */
.logo-img:hover {
transform: scale(1.1) rotate(5deg);
}
.logo-text {
font-size: 1.8rem;
margin: 0;
color: var(--accent-color);
}
nav a {
color: #fff;
text-decoration: none;
margin-left: 25px;
font-size: 1.1rem;
transition: color 0.3s, border-bottom 0.3s;
padding-bottom: 5px;
}
nav a:hover {
color: var(--accent-color);
border-bottom: 2px solid var(--accent-color);
}
/* Banner Principal Dinámico */
.hero-banner {
width: 100%;
height: 500px;
background-image: url('https://images.unsplash.com/photo-1497935586351-b67a49e012bf?ixlib=rb-4.0.3&auto=format&fit=crop&w=1600&q=80');
background-size: cover;
background-position: center;
display: flex;
align-items: center;
justify-content: center;
position: relative;
background-attachment: fixed; /* Efecto Parallax elegante */
}
.hero-banner::after {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(26, 18, 11, 0.7);
}
.hero-text {
position: relative;
z-index: 1;
text-align: center;
color: #fff;
animation: fadeIn 2s ease-in-out; /* Animación de entrada */
}
.hero-text h1 {
font-size: 4rem;
margin-bottom: 10px;
color: var(--accent-color);
}
/* Animación de desvanecimiento inicial */
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.section {
padding: 80px 20px;
max-width: 1100px;
margin: 0 auto;
text-align: center;
}
.section-title {
font-size: 2.8rem;
color: var(--text-color);
margin-bottom: 40px;
position: relative;
display: inline-block;
}
.section-title::after {
content: '';
width: 60%;
height: 3px;
background-color: var(--accent-color);
position: absolute;
bottom: -10px;
left: 20%;
}
/* ===== TARJETAS GIRATORIAS (FLIP CARDS) PARA EL CAFÉ ===== */
.menu-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
margin-top: 40px;
}
.flip-card {
background-color: transparent;
height: 300px;
perspective: 1000px; /* Crea el efecto 3D */
cursor: pointer;
}
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
border-radius: 12px;
}
/* El giro ocurre al pasar el ratón (o tocar en móvil) */
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}
.flip-card-front, .flip-card-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden; /* Oculta la parte trasera de Safari */
backface-visibility: hidden;
border-radius: 12px;
display: flex;
flex-direction: column;
justify-content: center;
padding: 20px;
box-sizing: border-box;
}
/* Frente de la tarjeta (Nombre del Café) */
.flip-card-front {
background-color: #fff;
color: var(--header-bg);
border-bottom: 5px solid var(--accent-color);
}
.flip-card-front img {
width: 80px;
margin-bottom: 15px;
border-radius: 50%;
}
/* Parte trasera (Origen e Ingredientes) */
.flip-card-back {
background-color: var(--header-bg);
color: white;
transform: rotateY(180deg);
border-top: 5px solid var(--accent-color);
text-align: left;
}
.flip-card-back h3 {
color: var(--accent-color);
margin-top: 0;
border-bottom: 1px solid #444;
padding-bottom: 10px;
}
.tag {
background-color: var(--accent-color);
color: #fff;
padding: 3px 8px;
border-radius: 4px;
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 1px;
display: inline-block;
margin-bottom: 10px;
}
/* Cards normales para otras secciones */
.card {
background: #fff;
padding: 30px;
border-radius: 8px;
box-shadow: 0 10px 20px rgba(0,0,0,0.05);
border-top: 4px solid var(--accent-color);
text-align: left;
transition: transform 0.3s ease;
}
.card:hover {
transform: translateY(-10px); /* Se levanta un poco al pasar el mouse */
}
footer {
background-color: var(--header-bg);
color: #fff;
text-align: center;
padding: 40px 20px;
margin-top: 50px;
border-top: 4px solid var(--accent-color);
}
</style>
<header>
<div class="logo-container">
<img src="LogoHaobac.jpeg" class="logo-img">
<h1 class="logo-text">CiberCafe HAOBAC</h1>
</div>
<nav>
<a href="#historia">Historia</a>
<a href="#experiencia">La Experiencia</a>
<a href="#menu-origen">Barra de Origen</a>
</nav>
</header>
<div class="hero-text" style="position: relative; z-index: 1;">
<h1 id="titulo-dinamico">Conexión & Confort</h1>
<p>Más que un cibercafé, tu espacio elegante para crear, trabajar y relajarte.</p>
</div>
<section id="menu-origen" class="section">
<h2 class="section-title">Nuestra Barra de Especialidad</h2>
<p>Pasa el cursor (o toca) sobre cada bebida para descubrir su historia, origen y cómo la preparamos para ti.</p>
<div class="menu-grid">
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<h3>☕ Espresso Lumina</h3>
<p>El alma de nuestra casa. Fuerte, aromático y con carácter.</p>
<span style="color: var(--accent-color); font-weight: bold;">Ver detalles ➜</span>
</div>
<div class="flip-card-back">
<h3>Espresso Lumina</h3>
<span class="tag">Origen: Anahuac, Nuevo Leon, México</span>
<p><strong>Notas:</strong> Cacao oscuro, nuez tostada y un ligero toque a caramelo.</p>
<p><strong>Preparación:</strong> Extracción precisa de 25 segundos a 9 bares de presión usando 100% granos de altura Arábica.</p>
</div>
</div>
</div>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<h3>🥛 Latte Vainilla Vintage</h3>
<p>Textura sedosa y dulzor equilibrado para acompañar tu lectura.</p>
<span style="color: var(--accent-color); font-weight: bold;">Ver detalles ➜</span>
</div>
<div class="flip-card-back">
<h3>Latte Vainilla</h3>
<span class="tag">Origen:Colombia / Madagascar</span>
<p><strong>Notas:</strong> Floral, dulce y cremoso.</p>
<p><strong>Preparación:</strong> Un shot de espresso intenso, leche texturizada al vapor para lograr microespuma y sirope de vainilla natural de Madagascar.</p>
</div>
</div>
</div>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<h3>🧊 Cold Brew de Autor</h3>
<p>Refrescante y enérgico, ideal para largas sesiones de trabajo.</p>
<span style="color: var(--accent-color); font-weight: bold;">Ver detalles ➜</span>
</div>
<div class="flip-card-back">
<h3>Cold Brew</h3>
<span class="tag">Origen: Yirgacheffe, Etiopía</span>
<p><strong>Notas:</strong> Frutos rojos, cítricos y muy baja acidez.</p>
<p><strong>Preparación:</strong> Maceración en frío gota a gota durante 24 horas. Servido sobre hielo roca para no diluir el sabor.</p>
</div>
</div>
</div>
</div>
</section>
<section id="experiencia" class="section" style="background-color: #F4EFE6;">
<h2 class="section-title">Nuestro Marco Axiológico</h2>
<div class="menu-grid">
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<h3 style="font-size: 2.2rem; margin-bottom: 10px;">🎯 Misión</h3>
<p>Nuestra razón de ser.</p>
<span style="color: var(--accent-color); font-weight: bold; margin-top: 20px;">Leer más ➜</span>
</div>
<div class="flip-card-back" style="padding: 15px;">
<h3>Misión</h3>
<p style="font-size: 0.95rem;">Brindar nuestro servicio de conexión de internet rápido y de confianza, acompañado de un ambiente agradable con equipos de calidad para que nuestros clientes puedan realizar sus actividades escolares, laborales o recreativas de manera eficiente y cómodo.</p>
</div>
</div>
</div>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<h3 style="font-size: 2.2rem; margin-bottom: 10px;">👁️ Visión</h3>
<p>Hacia dónde vamos.</p>
<span style="color: var(--accent-color); font-weight: bold; margin-top: 20px;">Leer más ➜</span>
</div>
<div class="flip-card-back" style="padding: 15px;">
<h3>Visión</h3>
<p style="font-size: 0.95rem;">Ser el cibercafé más reconocido de la zona por nuestra innovación, excelente atención al cliente y espacios modernos; expandiéndonos a nuevas sucursales y mejorando continuamente la experiencia digital de nuestros usuarios.</p>
</div>
</div>
</div>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<h3 style="font-size: 2.2rem; margin-bottom: 10px;">💎 Valores</h3>
<p>Los pilares que nos definen.</p>
<span style="color: var(--accent-color); font-weight: bold; margin-top: 20px;">Leer más ➜</span>
</div>
<div class="flip-card-back" style="padding: 15px;">
<h3>Valores</h3>
<p style="font-size: 1rem; line-height: 1.8;">
• Responsabilidad<br>
• Respeto<br>
• Innovación<br>
• Honestidad<br>
• Calidad
</p>
</div>
</div>
</div>
</div>
</section>
<section id="promo-1" class="section" style="background-color: #fff; padding: 60px 0;">
<h2 class="section-title">Banners Graficos</h2>
<div style="display: flex; justify-content: center; margin-top: 30px;">
<<div class="flip-card" style="width: 90%; max-width: 600px; height: 300px;">
<div class="flip-card-inner">
<div class="flip-card-front" style="padding: 0; overflow: hidden; border-bottom: 5px solid var(--accent-color);">
<img src="Banner1.png" style="width: 100%; height: 100%; object-fit: contain; background-color: #f9f9f9;">
</div>
<div class="flip-card-back">
<h3>Elementos Graficos y Visuales</h3>
<p>Incluye texto principal llamativo, frase secundaria, una taza de café como elemento central, botón de promoción “2x1”, número de contacto, logo y varios elementos decorativos navideños como copos, estrellas y formas onduladas. Usa efectos como sombras, contornos en el texto, textura tipo nieve, colores cálidos y composición centrada para dar profundidad y hacerlo más llamativo.</p>
<span class="tag"></span>
</div>
</div>
</div>
</div>
Banners Graficos
Elementos Graficos y Visuales
Contiene el logo grande, una taza ilustrada con salpicadura, granos de café, texto principal y redes sociales, sobre un fondo con textura café. Utiliza sombras suaves, brillo en la taza, ligera profundidad en el fondo y una composición horizontal más limpia y ordenada, con tonos café para un estilo más elegante.
Anáhuac, N.L.
HAOBAC Cyber & Café
Conectando ideas, sirviendo momentos.
📍 Av. Principal 124, Anahuac, Nuevo Leon | 📞 (+52) 873 104 4467
Banners Graficos
Elementos Graficos y Visuales
Contiene el logo grande, una taza ilustrada con salpicadura, granos de café, texto principal y redes sociales, sobre un fondo con textura café. Utiliza sombras suaves, brillo en la taza, ligera profundidad en el fondo y una composición horizontal más limpia y ordenada, con tonos café para un estilo más elegante.
Anáhuac, N.L.HAOBAC Cyber & Café
Conectando ideas, sirviendo momentos.
📍 Av. Principal 124, Anahuac, Nuevo Leon | 📞 (+52) 873 104 4467