Create a website summarizing the Holy Quran. Follow all English passages, titles, and sections, all information, with Arabic translations.
71677c2 verified | class CustomFooter extends HTMLElement { | |
| connectedCallback() { | |
| this.attachShadow({ mode: 'open' }); | |
| this.shadowRoot.innerHTML = ` | |
| <style> | |
| .footer-link { | |
| transition: all 0.2s ease; | |
| } | |
| .footer-link:hover { | |
| color: #3498db; | |
| transform: translateX(5px); | |
| } | |
| </style> | |
| <footer class="bg-primary text-white py-12"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <h3 class="text-xl font-bold mb-4">Quranic Insights</h3> | |
| <p class="text-gray-300">Exploring the wisdom of the Holy Quran with English translations and original Arabic text.</p> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-semibold mb-4">Quick Links</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="index.html" class="footer-link block">Home</a></li> | |
| <li><a href="#surahs" class="footer-link block">Surahs</a></li> | |
| <li><a href="#features" class="footer-link block">Features</a></li> | |
| <li><a href="#" class="footer-link block">About</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-semibold mb-4">Resources</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="footer-link block">Tafsir</a></li> | |
| <li><a href="#" class="footer-link block">Hadith</a></li> | |
| <li><a href="#" class="footer-link block">Duas</a></li> | |
| <li><a href="#" class="footer-link block">Islamic Calendar</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-semibold mb-4">Connect</h4> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-gray-300 hover:text-white transition duration-300"><i data-feather="facebook"></i></a> | |
| <a href="#" class="text-gray-300 hover:text-white transition duration-300"><i data-feather="twitter"></i></a> | |
| <a href="#" class="text-gray-300 hover:text-white transition duration-300"><i data-feather="instagram"></i></a> | |
| <a href="#" class="text-gray-300 hover:text-white transition duration-300"><i data-feather="youtube"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400"> | |
| <p>© ${new Date().getFullYear()} Quranic Insights Explorer. All rights reserved.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| feather.replace(); | |
| </script> | |
| `; | |
| } | |
| } | |
| customElements.define('custom-footer', CustomFooter); |