95 lines
3.7 KiB
HTML
95 lines
3.7 KiB
HTML
<header class="site-header">
|
|
<nav class="main-nav">
|
|
<a href="inicio.html" class="logo">
|
|
<img src="assets/logos/logo_ciruela.png" alt="Logo" class="logo-light">
|
|
<img src="assets/logos/logo_frio.png" alt="Logo" class="logo-dark">
|
|
</a>
|
|
|
|
<div class="nav-actions">
|
|
<button class="theme-toggle" aria-label="Cambiar tema">
|
|
<img src="assets/iconos/moon.svg" alt="Modo oscuro" class="theme-icon icon-moon">
|
|
<img src="assets/iconos/sun.svg" alt="Modo claro" class="theme-icon icon-sun">
|
|
</button>
|
|
|
|
<button class="menu-toggle" aria-label="Abrir menú" aria-expanded="false">
|
|
<svg class="menu-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<line x1="4" y1="7" x2="20" y2="7"></line>
|
|
<line x1="4" y1="12" x2="20" y2="12"></line>
|
|
<line x1="4" y1="17" x2="20" y2="17"></line>
|
|
</svg>
|
|
<span>Menú</span>
|
|
</button>
|
|
</div>
|
|
</nav>
|
|
</header>
|
|
|
|
<!-- Overlay para cerrar el menú -->
|
|
<div class="menu-overlay" id="menu-overlay"></div>
|
|
|
|
<!-- Menú desplegable inferior -->
|
|
<div class="fullscreen-menu" id="fullscreen-menu">
|
|
<button class="menu-close" aria-label="Cerrar menú">✕</button>
|
|
|
|
<div class="menu-content">
|
|
<!-- Columna 1: Inicio -->
|
|
<div class="menu-column">
|
|
<h3>Inicio</h3>
|
|
<ul>
|
|
<li><a href="inicio.html#section-1">Sección 1</a></li>
|
|
<li><a href="inicio.html#section-2">Sección 2</a></li>
|
|
<li><a href="inicio.html#section-3">Sección 3</a></li>
|
|
<li><a href="inicio.html#section-4">Sección 4</a></li>
|
|
<li><a href="inicio.html#section-5">Sección 5</a></li>
|
|
<li><a href="inicio.html#section-6">Sección 6</a></li>
|
|
<li><a href="inicio.html#section-7">Sección 7</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Columna 2: Navegación -->
|
|
<div class="menu-column">
|
|
<h3>Navegación</h3>
|
|
<ul>
|
|
<li><a href="inicio.html">Inicio</a></li>
|
|
<li><a href="servicios.html">Servicios</a></li>
|
|
<li><a href="planes.html">Planes</a></li>
|
|
<li><a href="portfolio.html">Portfolio</a></li>
|
|
<li><a href="nosotros.html">Nosotros</a></li>
|
|
<li><a href="blog.html">Blog</a></li>
|
|
<li><a href="contacto.html">Contacto</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Columna 3: Contacto y botones -->
|
|
<div class="menu-column">
|
|
<h3>Contacto</h3>
|
|
<div class="menu-contact-info">
|
|
<p class="contact-item">
|
|
<span class="contact-icon icon-email" aria-hidden="true"></span>
|
|
<span>info@agencia.com</span>
|
|
</p>
|
|
|
|
<p class="contact-item">
|
|
<span class="contact-icon icon-phone" aria-hidden="true"></span>
|
|
<span>+34 123 456 789</span>
|
|
</p>
|
|
|
|
<div class="menu-social">
|
|
<a href="https://instagram.com" target="_blank" rel="noopener"><i class="fa-brands fa-instagram"></i> Instagram</a>
|
|
<a href="https://facebook.com" target="_blank" rel="noopener"><i class="fa-brands fa-facebook"></i> Facebook</a>
|
|
<a href="https://linkedin.com" target="_blank" rel="noopener"><i class="fa-brands fa-linkedin-in"></i> LinkedIn</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="menu-buttons">
|
|
<a href="contacto.html" class="btn-menu btn-menu-primary">Hablemos</a>
|
|
<a href="trabaja.html" class="btn-menu btn-menu-secondary">Trabaja con nosotros</a>
|
|
</div>
|
|
|
|
<!-- Logo de marca integrado en el menú -->
|
|
<div class="menu-brand">
|
|
<img src="assets/logos/logo_ciruela.png" alt="Logo" class="logo-light">
|
|
<img src="assets/logos/logo_frio.png" alt="Logo" class="logo-dark">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div> |