Spaces:
Running
Running
| class CustomFooter extends HTMLElement { | |
| connectedCallback() { | |
| this.attachShadow({ mode: 'open' }); | |
| this.shadowRoot.innerHTML = ` | |
| <style> | |
| footer { | |
| background-color: #f8fafc; | |
| } | |
| .footer-container { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| } | |
| .footer-links a { | |
| transition: color 0.2s; | |
| } | |
| .footer-links a:hover { | |
| color: #13aa52; | |
| } | |
| </style> | |
| <footer class="py-12 px-6 border-t border-gray-200"> | |
| <div class="footer-container"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <div class="flex items-center mb-4"> | |
| <i data-feather="database" class="text-green-600 mr-2"></i> | |
| <span class="text-xl font-bold text-gray-800">MongoMaster</span> | |
| </div> | |
| <p class="text-gray-600 mb-4">Master MongoDB with our expert-led courses and training programs.</p> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-gray-500 hover:text-green-600"> | |
| <i data-feather="twitter"></i> | |
| </a> | |
| <a href="#" class="text-gray-500 hover:text-green-600"> | |
| <i data-feather="linkedin"></i> | |
| </a> | |
| <a href="#" class="text-gray-500 hover:text-green-600"> | |
| <i data-feather="youtube"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-semibold text-gray-800 mb-4">Courses</h4> | |
| <div class="footer-links flex flex-col space-y-2"> | |
| <a href="#" class="text-gray-600">Developer Courses</a> | |
| <a href="#" class="text-gray-600">Administrator Courses</a> | |
| <a href="#" class="text-gray-600">Advanced Courses</a> | |
| <a href="#" class="text-gray-600">Certification</a> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-semibold text-gray-800 mb-4">Company</h4> | |
| <div class="footer-links flex flex-col space-y-2"> | |
| <a href="#" class="text-gray-600">About Us</a> | |
| <a href="#" class="text-gray-600">Instructors</a> | |
| <a href="#" class="text-gray-600">Careers</a> | |
| <a href="#" class="text-gray-600">Contact</a> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-semibold text-gray-800 mb-4">Legal</h4> | |
| <div class="footer-links flex flex-col space-y-2"> | |
| <a href="#" class="text-gray-600">Privacy Policy</a> | |
| <a href="#" class="text-gray-600">Terms of Service</a> | |
| <a href="#" class="text-gray-600">Refund Policy</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-200 mt-8 pt-8 text-center text-gray-500"> | |
| <p>© ${new Date().getFullYear()} MongoMaster Academy. All rights reserved.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script>feather.replace();</script> | |
| `; | |
| } | |
| } | |
| customElements.define('custom-footer', CustomFooter); |