Spaces:
Running
Running
| class FooterComponent extends HTMLElement { | |
| connectedCallback() { | |
| this.attachShadow({ mode: 'open' }); | |
| this.shadowRoot.innerHTML = ` | |
| <style> | |
| footer { | |
| background-color: #1f2937; | |
| } | |
| .footer-link { | |
| color: #d1d5db; | |
| transition: color 0.2s; | |
| } | |
| .footer-link:hover { | |
| color: white; | |
| } | |
| .social-icon { | |
| background-color: #374151; | |
| transition: background-color 0.2s; | |
| } | |
| .social-icon:hover { | |
| background-color: #4b5563; | |
| } | |
| </style> | |
| <footer class="text-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-12"> | |
| <!-- Column 1 --> | |
| <div> | |
| <h3 class="text-lg font-bold mb-6">Domeinnaam</h3> | |
| <ul class="space-y-3"> | |
| <li><a href="#" class="footer-link">Domeinnaam registreren</a></li> | |
| <li><a href="#" class="footer-link">Nieuwe domeinnamen</a></li> | |
| <li><a href="#" class="footer-link">E-mail</a></li> | |
| <li><a href="#" class="footer-link">Prijzen domeinnamen</a></li> | |
| </ul> | |
| </div> | |
| <!-- Column 2 --> | |
| <div> | |
| <h3 class="text-lg font-bold mb-6">E-mail en Office</h3> | |
| <ul class="space-y-3"> | |
| <li><a href="#" class="footer-link">Microsoft 365</a></li> | |
| <li><a href="#" class="footer-link">E-mail Hosting</a></li> | |
| </ul> | |
| <h3 class="text-lg font-bold mt-8 mb-6">Website</h3> | |
| <ul class="space-y-3"> | |
| <li><a href="#" class="footer-link">Website maken</a></li> | |
| <li><a href="#" class="footer-link">Webshop maken</a></li> | |
| <li><a href="#" class="footer-link">Website laten maken</a></li> | |
| </ul> | |
| </div> | |
| <!-- Column 3 --> | |
| <div> | |
| <h3 class="text-lg font-bold mb-6">WordPress</h3> | |
| <ul class="space-y-3"> | |
| <li><a href="#" class="footer-link">WordPress-website maken</a></li> | |
| <li><a href="#" class="footer-link">Hosting voor WordPress</a></li> | |
| <li><a href="#" class="footer-link">WP.one</a></li> | |
| </ul> | |
| <h3 class="text-lg font-bold mt-8 mb-6">Hosting</h3> | |
| <ul class="space-y-3"> | |
| <li><a href="#" class="footer-link">Webhosting</a></li> | |
| <li><a href="#" class="footer-link">Managed Hosting</a></li> | |
| </ul> | |
| </div> | |
| <!-- Column 4 --> | |
| <div> | |
| <h3 class="text-lg font-bold mb-6">VPS</h3> | |
| <ul class="space-y-3"> | |
| <li><a href="#" class="footer-link">VPS Hosting</a></li> | |
| <li><a href="#" class="footer-link">SSL-certificaten</a></li> | |
| <li><a href="#" class="footer-link">Managed VPS</a></li> | |
| </ul> | |
| <h3 class="text-lg font-bold mt-8 mb-6">Over Hostnet</h3> | |
| <ul class="space-y-3"> | |
| <li><a href="#" class="footer-link">Over Hostnet</a></li> | |
| <li><a href="#" class="footer-link">Nieuws</a></li> | |
| <li><a href="#" class="footer-link">Academy</a></li> | |
| </ul> | |
| </div> | |
| <!-- Column 5 --> | |
| <div> | |
| <h3 class="text-lg font-bold mb-6">Inloggen</h3> | |
| <ul class="space-y-3"> | |
| <li><a href="#" class="footer-link">Mijn Hostnet</a></li> | |
| <li><a href="#" class="footer-link">Webmail</a></li> | |
| <li><a href="#" class="footer-link">Microsoft Office 365</a></li> | |
| </ul> | |
| <h3 class="text-lg font-bold mt-8 mb-6">Hulp nodig?</h3> | |
| <ul class="space-y-3"> | |
| <li><a href="#" class="footer-link">Helpdesk</a></li> | |
| <li><a href="#" class="footer-link">Stuur een e-mail</a></li> | |
| <li><a href="#" class="footer-link">Storingen en onderhoud</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-700 mt-12 pt-8"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="mb-6 md:mb-0"> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="social-icon w-10 h-10 rounded-full flex items-center justify-center"> | |
| <i data-feather="facebook" class="w-5 h-5"></i> | |
| </a> | |
| <a href="#" class="social-icon w-10 h-10 rounded-full flex items-center justify-center"> | |
| <i data-feather="youtube" class="w-5 h-5"></i> | |
| </a> | |
| <a href="#" class="social-icon w-10 h-10 rounded-full flex items-center justify-center"> | |
| <i data-feather="linkedin" class="w-5 h-5"></i> | |
| </a> | |
| <a href="#" class="social-icon w-10 h-10 rounded-full flex items-center justify-center"> | |
| <i data-feather="instagram" class="w-5 h-5"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="text-gray-400 text-sm"> | |
| <p>Alle prijzen zijn exclusief 21% btw, tenzij anders vermeld.</p> | |
| <div class="flex space-x-4 mt-4"> | |
| <div class="bg-gray-200 border-2 border-dashed rounded w-12 h-6"></div> | |
| <div class="bg-gray-200 border-2 border-dashed rounded w-12 h-6"></div> | |
| <div class="bg-gray-200 border-2 border-dashed rounded w-12 h-6"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex flex-wrap justify-center gap-6 mt-8 text-gray-400 text-sm"> | |
| <a href="#" class="hover:text-white">Algemene voorwaarden</a> | |
| <a href="#" class="hover:text-white">Privacy en cookies</a> | |
| <a href="#" class="hover:text-white">Sitemap</a> | |
| <a href="#" class="hover:text-white">Herroepingsrecht</a> | |
| <a href="#" class="hover:text-white">Copyright</a> | |
| <a href="#" class="hover:text-white">Legal</a> | |
| <a href="#" class="hover:text-white">Toegankelijkheidsverklaring</a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| `; | |
| feather.replace(); | |
| } | |
| } | |
| customElements.define('footer-component', FooterComponent); |