Spaces:
Running
Running
| class CustomHeader extends HTMLElement { | |
| connectedCallback() { | |
| this.attachShadow({ mode: 'open' }); | |
| this.shadowRoot.innerHTML = ` | |
| <style> | |
| header { | |
| background-color: white; | |
| box-shadow: 0 1px 3px rgba(0,0,0,0.1); | |
| } | |
| .container { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 1rem; | |
| } | |
| .logo { | |
| font-weight: 700; | |
| font-size: 1.5rem; | |
| color: #4F46E5; | |
| } | |
| nav a { | |
| color: #4B5563; | |
| transition: color 0.2s; | |
| } | |
| nav a:hover { | |
| color: #4F46E5; | |
| } | |
| @media (max-width: 640px) { | |
| .container { | |
| flex-direction: column; | |
| gap: 1rem; | |
| } | |
| } | |
| </style> | |
| <header> | |
| <div class="container mx-auto px-4 flex justify-between items-center"> | |
| <a href="#" class="logo">FormFusion</a> | |
| <nav class="flex gap-6"> | |
| <a href="#" class="flex items-center gap-1"> | |
| <i data-feather="home"></i> | |
| <span>Home</span> | |
| </a> | |
| <a href="#" class="flex items-center gap-1"> | |
| <i data-feather="help-circle"></i> | |
| <span>Help</span> | |
| </a> | |
| </nav> | |
| </div> | |
| </header> | |
| `; | |
| } | |
| } | |
| customElements.define('custom-header', CustomHeader); |