Spaces:
Running
Running
La imagen de fond cambiarla por una con letras, palabras, etc. Vamos a hacer el apartado de servicios mas discreto, con los servicios en tarjetas uno al lado del otro. Quiero que las categorías del blog estén más organizadas en una sección con pestañas nombradas como las etiquetas principales: idiomas, lectura, música, otros. Quiero poder ver el header y el footer
0e82ba4 verified | class CustomNavbar extends HTMLElement { | |
| connectedCallback() { | |
| this.attachShadow({ mode: 'open' }); | |
| this.shadowRoot.innerHTML = ` | |
| <style> | |
| nav { | |
| background-color: rgba(17, 24, 39, 0.9); | |
| backdrop-filter: blur(10px); | |
| transition: all 0.3s ease; | |
| } | |
| nav.scrolled { | |
| background-color: rgba(17, 24, 39, 0.98); | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); | |
| } | |
| .nav-link { | |
| position: relative; | |
| } | |
| .nav-link::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: -2px; | |
| left: 0; | |
| width: 0; | |
| height: 2px; | |
| background-color: #b45309; | |
| transition: width 0.3s ease; | |
| } | |
| .nav-link:hover::after { | |
| width: 100%; | |
| } | |
| .language-selector { | |
| position: relative; | |
| } | |
| .language-dropdown { | |
| display: none; | |
| position: absolute; | |
| right: 0; | |
| background-color: #1a1a1a; | |
| min-width: 160px; | |
| box-shadow: 0px 8px 16px rgba(0,0,0,0.2); | |
| z-index: 1; | |
| border-radius: 4px; | |
| } | |
| .language-selector:hover .language-dropdown { | |
| display: block; | |
| } | |
| .language-option { | |
| padding: 12px 16px; | |
| display: flex; | |
| align-items: center; | |
| transition: background-color 0.3s; | |
| } | |
| .language-option:hover { | |
| background-color: #b45309; | |
| } | |
| .active { | |
| color: #b45309; | |
| } | |
| </style> | |
| <nav class="fixed w-full z-50 py-4 px-6 md:px-12 transition-all duration-300"> | |
| <div class="max-w-7xl mx-auto flex justify-between items-center"> | |
| <a href="index.html" class="text-2xl font-playfair font-bold text-amber-100 hover:text-amber-200 transition duration-300"> | |
| La Fragua del Logos | |
| </a> | |
| <div class="hidden md:flex items-center space-x-8"> | |
| <a href="index.html" class="nav-link text-amber-100 hover:text-amber-200" data-i18n="nav_home">Home</a> | |
| <a href="about.html" class="nav-link text-amber-100 hover:text-amber-200 text-sm" data-i18n="nav_about">About Me</a> | |
| <a href="#services" class="nav-link text-amber-100 hover:text-amber-200" data-i18n="nav_services">Services</a> | |
| <a href="blog.html" class="nav-link text-amber-100 hover:text-amber-200" data-i18n="nav_blog">Blog</a> | |
| <a href="#contact" class="nav-link text-amber-100 hover:text-amber-200" data-i18n="nav_contact">Contact</a> | |
| <div class="language-selector ml-4"> | |
| <button class="flex items-center text-amber-100 hover:text-amber-200"> | |
| <i data-feather="globe" class="w-5 h-5 mr-2"></i> | |
| <span class="language-label">ES</span> | |
| <i data-feather="chevron-down" class="w-4 h-4 ml-1"></i> | |
| </button> | |
| <div class="language-dropdown"> | |
| <div class="language-option active" data-lang="es"> | |
| <span class="mr-2">🇪🇸</span> | |
| <span data-i18n="lang_es">Español</span> | |
| </div> | |
| <div class="language-option" data-lang="en"> | |
| <span class="mr-2">🇬🇧</span> | |
| <span data-i18n="lang_en">English</span> | |
| </div> | |
| <div class="language-option" data-lang="fr"> | |
| <span class="mr-2">🇫🇷</span> | |
| <span data-i18n="lang_fr">Français</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <button class="md:hidden text-amber-100 focus:outline-none"> | |
| <i data-feather="menu" class="w-6 h-6"></i> | |
| </button> | |
| </div> | |
| <!-- Mobile menu --> | |
| <div class="md:hidden hidden bg-gray-900 mt-4 py-4 px-6 rounded-lg"> | |
| <a href="index.html" class="block py-2 text-amber-100 hover:text-amber-200" data-i18n="nav_home">Home</a> | |
| <a href="about.html" class="block py-2 text-amber-100 hover:text-amber-200 text-sm" data-i18n="nav_about">About Me</a> | |
| <a href="#services" class="block py-2 text-amber-100 hover:text-amber-200" data-i18n="nav_services">Services</a> | |
| <a href="blog.html" class="block py-2 text-amber-100 hover:text-amber-200" data-i18n="nav_blog">Blog</a> | |
| <a href="#contact" class="block py-2 text-amber-100 hover:text-amber-200" data-i18n="nav_contact">Contact</a> | |
| <div class="pt-4 border-t border-gray-700 mt-4"> | |
| <div class="language-option active" data-lang="es"> | |
| <span class="mr-2">🇪🇸</span> | |
| <span data-i18n="lang_es">Español</span> | |
| </div> | |
| <div class="language-option" data-lang="en"> | |
| <span class="mr-2">🇬🇧</span> | |
| <span data-i18n="lang_en">English</span> | |
| </div> | |
| <div class="language-option" data-lang="fr"> | |
| <span class="mr-2">🇫🇷</span> | |
| <span data-i18n="lang_fr">Français</span> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <script> | |
| // Mobile menu toggle | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const mobileMenuButton = this.shadowRoot.querySelector('button[class*="md:hidden"]'); | |
| const mobileMenu = this.shadowRoot.querySelector('div[class*="md:hidden"]'); | |
| mobileMenuButton.addEventListener('click', function() { | |
| const isHidden = mobileMenu.classList.contains('hidden'); | |
| if (isHidden) { | |
| mobileMenu.classList.remove('hidden'); | |
| feather.replace(); | |
| } else { | |
| mobileMenu.classList.add('hidden'); | |
| } | |
| }); | |
| // Scroll effect for navbar | |
| window.addEventListener('scroll', function() { | |
| const nav = this.shadowRoot.querySelector('nav'); | |
| if (window.scrollY > 50) { | |
| nav.classList.add('scrolled'); | |
| } else { | |
| nav.classList.remove('scrolled'); | |
| } | |
| }); | |
| feather.replace(); | |
| }); | |
| </script> | |
| `; | |
| } | |
| } | |
| customElements.define('custom-navbar', CustomNavbar); |