| class CustomFooter extends HTMLElement { |
| connectedCallback() { |
| this.attachShadow({ mode: 'open' }); |
| this.shadowRoot.innerHTML = ` |
| <style> |
| footer { |
| background-color: #09090b; |
| padding: 3rem 2rem; |
| text-align: center; |
| } |
| |
| .footer-content { |
| max-width: 1200px; |
| margin: 0 auto; |
| } |
| |
| .footer-links { |
| display: flex; |
| justify-content: center; |
| gap: 2rem; |
| margin-bottom: 2rem; |
| } |
| |
| .footer-link { |
| color: #a1a1aa; |
| text-decoration: none; |
| transition: color 0.3s ease; |
| } |
| |
| .footer-link:hover { |
| color: #f4f4f5; |
| } |
| |
| .copyright { |
| color: #52525b; |
| font-size: 0.875rem; |
| } |
| |
| .social-icons { |
| display: flex; |
| justify-content: center; |
| gap: 1.5rem; |
| margin-bottom: 2rem; |
| } |
| |
| .social-icon { |
| color: #a1a1aa; |
| transition: color 0.3s ease; |
| } |
| |
| .social-icon:hover { |
| color: #f4f4f5; |
| } |
| </style> |
| |
| <footer> |
| <div class="footer-content"> |
| <div class="social-icons"> |
| <a href="#" class="social-icon" aria-label="Instagram"> |
| <i data-feather="instagram"></i> |
| </a> |
| <a href="#" class="social-icon" aria-label="Twitter"> |
| <i data-feather="twitter"></i> |
| </a> |
| <a href="#" class="social-icon" aria-label="Vimeo"> |
| <i data-feather="youtube"></i> |
| </a> |
| <a href="#" class="social-icon" aria-label="LinkedIn"> |
| <i data-feather="linkedin"></i> |
| </a> |
| </div> |
| <div class="footer-links"> |
| <a href="#about" class="footer-link">About</a> |
| <a href="#work" class="footer-link">Work</a> |
| <a href="#reviews" class="footer-link">Reviews</a> |
| <a href="#contact" class="footer-link">Contact</a> |
| <a href="#" class="footer-link">Privacy</a> |
| <a href="discourse.html" class="footer-link">Discourse</a> |
| </div> |
| <p class="copyright">© ${new Date().getFullYear()} Siegfried Ortner. All rights reserved.</p> |
| </div> |
| </footer> |
| `; |
| } |
| } |
|
|
| customElements.define('custom-footer', CustomFooter); |
