Alicia1908/high-school-planner-pro

1class CustomHeader extends HTMLElement {2    connectedCallback() {3        this.attachShadow({ mode: 'open' });4        this.shadowRoot.innerHTML = `5            <style>6                header {7                    background-color: white;8                    box-shadow: 0 2px 4px rgba(0,0,0,0.1);9                    padding: 1rem 0;10                }11                12                .container {13                    max-width: 1200px;14                    margin: 0 auto;15                    padding: 0 1rem;16                    display: flex;17                    justify-content: space-between;18                    align-items: center;19                }20                21                .logo {22                    display: flex;23                    align-items: center;24                    gap: 0.75rem;25                    font-size: 1.25rem;26                    font-weight: 700;27                    color: #111;28                    text-decoration: none;29                }30                31                .logo-icon {32                    color: #0b6cff;33                }34                35                nav {36                    display: flex;37                    gap: 1.5rem;38                }39                40                nav a {41                    color: #4b5563;42                    text-decoration: none;43                    font-weight: 500;44                    transition: color 0.2s;45                }46                47                nav a:hover {48                    color: #0b6cff;49                }50                51                @media (max-width: 768px) {52                    .container {53                        flex-direction: column;54                        gap: 1rem;55                    }56                    57                    nav {58                        gap: 1rem;59                    }60                }61            </style>62            <header>63                <div class="container">64                    <a href="/" class="logo">65                        <i data-feather="book-open" class="logo-icon"></i>66                        <span>High School Planner Pro</span>67                    </a>68                    <nav>69                        <a href="#">Home</a>70                        <a href="#">Resources</a>71                        <a href="#">About</a>72                        <a href="#">Contact</a>73                    </nav>74                </div>75            </header>76        `;77    }78}79 80customElements.define('custom-header', CustomHeader);