| class CustomFooter extends HTMLElement { |
| connectedCallback() { |
| this.attachShadow({ mode: 'open' }); |
| this.shadowRoot.innerHTML = ` |
| <style> |
| footer { |
| background: #1f2937; |
| color: white; |
| padding: 4rem 2rem 2rem; |
| } |
| .footer-container { |
| max-width: 1200px; |
| margin: 0 auto; |
| display: grid; |
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); |
| gap: 2rem; |
| } |
| .footer-logo { |
| font-weight: 800; |
| font-size: 1.5rem; |
| background: linear-gradient(to right, #6366f1, #8b5cf6); |
| -webkit-background-clip: text; |
| background-clip: text; |
| color: transparent; |
| margin-bottom: 1rem; |
| display: inline-block; |
| } |
| .footer-about p { |
| color: #d1d5db; |
| margin-bottom: 1.5rem; |
| line-height: 1.6; |
| } |
| .social-links { |
| display: flex; |
| gap: 1rem; |
| } |
| .social-links a { |
| width: 36px; |
| height: 36px; |
| border-radius: 50%; |
| background: rgba(255, 255, 255, 0.1); |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| transition: all 0.2s; |
| } |
| .social-links a:hover { |
| background: #6366f1; |
| } |
| .footer-links h3 { |
| font-size: 1.125rem; |
| font-weight: 600; |
| margin-bottom: 1.25rem; |
| color: white; |
| } |
| .footer-links ul { |
| list-style: none; |
| padding: 0; |
| margin: 0; |
| } |
| .footer-links li { |
| margin-bottom: 0.75rem; |
| } |
| .footer-links a { |
| color: #d1d5db; |
| text-decoration: none; |
| transition: color 0.2s; |
| } |
| .footer-links a:hover { |
| color: #6366f1; |
| } |
| .footer-bottom { |
| border-top: 1px solid rgba(255, 255, 255, 0.1); |
| padding-top: 2rem; |
| margin-top: 3rem; |
| text-align: center; |
| color: #9ca3af; |
| font-size: 0.875rem; |
| } |
| @media (max-width: 768px) { |
| .footer-container { |
| grid-template-columns: 1fr; |
| } |
| } |
| </style> |
| <footer> |
| <div class="footer-container"> |
| <div class="footer-about"> |
| <a href="/" class="footer-logo">EduSphere</a> |
| <p>Modern education platform designed to help you achieve your learning goals with interactive courses and expert guidance.</p> |
| <div class="social-links"> |
| <a href="#"><i data-feather="twitter"></i></a> |
| <a href="#"><i data-feather="facebook"></i></a> |
| <a href="#"><i data-feather="linkedin"></i></a> |
| <a href="#"><i data-feather="instagram"></i></a> |
| <a href="#"><i data-feather="youtube"></i></a> |
| </div> |
| </div> |
| |
| <div class="footer-links"> |
| <h3>Company</h3> |
| <ul> |
| <li><a href="/about.html">About Us</a></li> |
| <li><a href="/careers.html">Careers</a></li> |
| <li><a href="/blog.html">Blog</a></li> |
| <li><a href="/press.html">Press</a></li> |
| </ul> |
| </div> |
| |
| <div class="footer-links"> |
| <h3>Resources</h3> |
| <ul> |
| <li><a href="/help.html">Help Center</a></li> |
| <li><a href="/tutorials.html">Tutorials</a></li> |
| <li><a href="/webinars.html">Webinars</a></li> |
| <li><a href="/guides.html">Guides</a></li> |
| </ul> |
| </div> |
| |
| <div class="footer-links"> |
| <h3>Legal</h3> |
| <ul> |
| <li><a href="/privacy.html">Privacy Policy</a></li> |
| <li><a href="/terms.html">Terms of Service</a></li> |
| <li><a href="/cookies.html">Cookie Policy</a></li> |
| <li><a href="/gdpr.html">GDPR</a></li> |
| </ul> |
| </div> |
| </div> |
| |
| <div class="footer-bottom"> |
| <p>© ${new Date().getFullYear()} EduSphere. All rights reserved.</p> |
| </div> |
| </footer> |
| `; |
| |
| |
| setTimeout(() => { |
| if (this.shadowRoot.querySelector('[data-feather]')) { |
| feather.replace(); |
| } |
| }, 100); |
| } |
| } |
|
|
| customElements.define('custom-footer', CustomFooter); |
