Create a modern, spiritually uplifting Islamic website for Rabbana.pk, a platform dedicated to Islamic knowledge and spirituality. The website should focus on displaying authentic duas, the 99 Names of Allah with meanings, Islamic wazaif, articles, lectures, and educational videos. Use a soft and elegant Islamic theme with calming colors (white, soft green, gold accents, beige backgrounds). The design must be mobile-friendly, fast, and optimized for reading and video consumption. Include high-quality, respectful Islamic imagery and subtle calligraphy patterns for a spiritual atmosphere. Design & Aesthetic: Use a soft and elegant Islamic theme with calming, spiritually resonant colors. Suggested color palette: Background/Base Colors: Ivory White #FDFDFD โ for cleanliness and clarity. Beige Sand #F5EFE6 โ for warmth and calm. Primary Accent Colors: Sage Green #A3B18A โ symbolizing peace, growth, and tranquility. Emerald Green #3A6351 โ a rich Islamic heritage tone for key highlights. Gold #D4AF37 โ for divine accents, calligraphy, borders, or section dividers. Text & Secondary Colors: Charcoal Gray #333333 โ for readable body text. Taupe Brown #7B6651 โ for subheadings and interface elements. Muted Teal #5E807F โ for buttons, links, and subtle contrasts. Include high-quality, respectful Islamic imagery and subtle Arabic calligraphy background patterns (e.g., Bismillah, Ayahs in faded gold or white). Ensure the design is mobile-friendly, fast-loading, and optimized for reading and video consumption. Website Sections/Pages: 1. Home Page Clean, welcoming hero banner with an Islamic quote (e.g., a Quranic verse or dua). CTA buttons: โExplore Duasโ, โ99 Names of Allahโ, โRead Wazaifโ, โWatch Lecturesโ. Search bar for quick dua lookup. Featured Duas (e.g., Morning Duas, Duas from the Quran). Carousel or grid for top categories: Duas, Allah's Names, Articles, Videos. 2. Duas Page Browseable and searchable list of authentic duas. Categories: Quranic Duas, Sunnah Duas, Duas for Daily Life (morning, evening, travel, illness, anxiety, etc.). Each dua should include: Arabic text (with clear Uthmani script), Transliteration, Translation in Urdu and English, Source (Quran/Hadith), Audio playback button for proper pronunciation. Option to bookmark or favorite duas. Option to copy or share the dua. 3. 99 Names of Allah (Asma-ul-Husna) Grid layout of the 99 names. On click/tap: show details including: Arabic name with diacritics English and Urdu translation Description and benefits of reciting the name Audio pronunciation Optional: Include filters like โNames for Barakahโ, โNames for Rizqโ, etc. 4. Wazaif List of authentic Islamic wazaif for various needs (e.g., Rizq, Shifa, Marriage, Protection). Clear structure: Purpose of the wazifa Relevant ayahs/duas Number of recitations and recommended time Precautions and authenticity level Add scholar-approved or referenced-only content. 5. Articles / Blog Well-written Islamic articles in Urdu and English. Topics may include: Islamic lifestyle, purification of heart, parenting, marriage, Ramadan, Fiqh issues, etc. Include author bio, publication date, and tags/categories. 6. Lectures & Videos Video library of Islamic lectures and short clips. Categories: Quran Tafsir, Hadith Lessons, Fiqh, Motivation, Youth Guidance, Women in Islam. Include speaker name, length, and topics covered. YouTube or self-hosted embedding, with playlists option. 7. Search & Filter Functionality Smart global search for duas, names of Allah, wazaif, and content. Filters by category, keyword, source, or content type (text, audio, video). 8. Contact Page Simple contact form: Name, Email, Subject, Message. Include email, optional phone, social media links. Option for users to suggest a dua or request an article/video topic. 9. About Us Introduce Rabbana.pk: vision, mission, team (if public), and authenticity policy. Mention the importance of verified Islamic content. Option to include scholar endorsements or consultation board if available. 10. Footer Quick links to main sections: Duas, Allahโs Names, Wazaif, Articles, Videos. Social media icons (YouTube, Instagram, Facebook, Telegram). Newsletter signup: โGet weekly duas and articles to your inbox.โ Islamic quote or ayah (e.g., "And your Lord says, Call upon Me; I will respond to you" - Surah Ghafir: 60). Additional Features to Include: Dark Mode Toggle for night-time reading. Audio Support for all duas and names. Bookmark/Favorites Account System (optional login for users to save content). Multilingual Support: Start with Urdu & English, with scalable support for Arabic or other languages. SEO Optimized for Quranic content and educational searches. Privacy-focused Ads (if monetized) or donation support option (e.g., โSupport Rabbana.pkโ). - Initial Deployment
f92074e verified | <html lang="en" dir="rtl"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Rabbana.pk - Islamic Knowledge & Spirituality</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Amiri:wght@400;700&family=Noto+Naskh+Arabic:wght@400;600&family=Poppins:wght@300;400;500;600&display=swap'); | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| background-color: #F5EFE6; | |
| color: #333333; | |
| } | |
| .arabic { | |
| font-family: 'Noto Naskh Arabic', serif; | |
| font-size: 1.5rem; | |
| line-height: 2.5rem; | |
| } | |
| .calligraphy-bg { | |
| background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><text x="10" y="50" font-family="Noto Naskh Arabic" font-size="20" fill="%23D4AF37" opacity="0.1">ุจุณู ุงููู ุงูุฑุญู ู ุงูุฑุญูู </text></svg>'); | |
| background-repeat: repeat; | |
| background-size: 300px; | |
| } | |
| .hero-gradient { | |
| background: linear-gradient(135deg, rgba(163, 177, 138, 0.9) 0%, rgba(58, 99, 81, 0.9) 100%); | |
| } | |
| .nav-item::after { | |
| content: ''; | |
| display: block; | |
| width: 0; | |
| height: 2px; | |
| background: #D4AF37; | |
| transition: width 0.3s; | |
| } | |
| .nav-item:hover::after { | |
| width: 100%; | |
| } | |
| .dua-card { | |
| transition: all 0.3s ease; | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); | |
| } | |
| .dua-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1); | |
| } | |
| .name-card { | |
| perspective: 1000px; | |
| } | |
| .name-card-inner { | |
| transition: transform 0.6s; | |
| transform-style: preserve-3d; | |
| } | |
| .name-card:hover .name-card-inner { | |
| transform: rotateY(180deg); | |
| } | |
| .name-card-front, .name-card-back { | |
| backface-visibility: hidden; | |
| } | |
| .name-card-back { | |
| transform: rotateY(180deg); | |
| } | |
| .dark-mode { | |
| background-color: #1a1a1a; | |
| color: #e5e5e5; | |
| } | |
| .dark-mode .bg-beige { | |
| background-color: #2d2d2d; | |
| } | |
| .dark-mode .text-charcoal { | |
| color: #e5e5e5; | |
| } | |
| .dark-mode .dua-card { | |
| background-color: #333333; | |
| color: #e5e5e5; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; } | |
| to { opacity: 1; } | |
| } | |
| .fade-in { | |
| animation: fadeIn 0.5s ease-in; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-beige"> | |
| <!-- Dark Mode Toggle --> | |
| <div class="fixed bottom-4 right-4 z-50"> | |
| <button id="darkModeToggle" class="bg-emerald-700 hover:bg-emerald-800 text-white rounded-full p-3 shadow-lg"> | |
| <i class="fas fa-moon"></i> | |
| </button> | |
| </div> | |
| <!-- Header --> | |
| <header class="sticky top-0 z-40 shadow-md bg-white"> | |
| <div class="container mx-auto px-4 py-3 flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <a href="#" class="flex items-center"> | |
| <div class="w-12 h-12 rounded-full bg-emerald-700 flex items-center justify-center text-white text-2xl font-bold mr-3">ุฑ</div> | |
| <span class="text-2xl font-bold text-emerald-800 hidden md:block">Rabbana.pk</span> | |
| </a> | |
| </div> | |
| <div class="hidden md:flex space-x-8"> | |
| <a href="#home" class="nav-item text-emerald-800 font-medium">Home</a> | |
| <a href="#duas" class="nav-item text-emerald-800 font-medium">Duas</a> | |
| <a href="#names" class="nav-item text-emerald-800 font-medium">99 Names</a> | |
| <a href="#wazaif" class="nav-item text-emerald-800 font-medium">Wazaif</a> | |
| <a href="#articles" class="nav-item text-emerald-800 font-medium">Articles</a> | |
| <a href="#videos" class="nav-item text-emerald-800 font-medium">Videos</a> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <button class="md:hidden text-emerald-800 text-2xl" id="mobileMenuButton"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| <button class="hidden md:block bg-emerald-700 hover:bg-emerald-800 text-white px-4 py-2 rounded-full"> | |
| <i class="fas fa-search mr-2"></i> Search | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Mobile Menu --> | |
| <div id="mobileMenu" class="hidden md:hidden bg-white absolute w-full left-0 top-16 shadow-lg py-2 px-4"> | |
| <a href="#home" class="block py-2 text-emerald-800 border-b border-gray-100">Home</a> | |
| <a href="#duas" class="block py-2 text-emerald-800 border-b border-gray-100">Duas</a> | |
| <a href="#names" class="block py-2 text-emerald-800 border-b border-gray-100">99 Names</a> | |
| <a href="#wazaif" class="block py-2 text-emerald-800 border-b border-gray-100">Wazaif</a> | |
| <a href="#articles" class="block py-2 text-emerald-800 border-b border-gray-100">Articles</a> | |
| <a href="#videos" class="block py-2 text-emerald-800">Videos</a> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section id="home" class="hero-gradient text-white py-16 md:py-24 calligraphy-bg"> | |
| <div class="container mx-auto px-4"> | |
| <div class="max-w-3xl mx-auto text-center"> | |
| <h1 class="text-3xl md:text-5xl font-bold mb-6">Seek Knowledge, Find Peace</h1> | |
| <p class="arabic text-2xl md:text-3xl mb-8">ููููู ุฑููุจูู ุฒูุฏูููู ุนูููู ูุง</p> | |
| <p class="text-xl mb-8">"And say: My Lord, increase me in knowledge." (Quran 20:114)</p> | |
| <div class="flex flex-wrap justify-center gap-4 mb-8"> | |
| <a href="#duas" class="bg-white text-emerald-800 hover:bg-gray-100 px-6 py-3 rounded-full font-medium">Explore Duas</a> | |
| <a href="#names" class="bg-transparent border-2 border-white hover:bg-white hover:text-emerald-800 px-6 py-3 rounded-full font-medium">99 Names</a> | |
| <a href="#wazaif" class="bg-transparent border-2 border-white hover:bg-white hover:text-emerald-800 px-6 py-3 rounded-full font-medium">Wazaif</a> | |
| </div> | |
| <div class="relative max-w-xl mx-auto"> | |
| <input type="text" placeholder="Search for duas, names, articles..." class="w-full px-6 py-4 rounded-full text-gray-800 focus:outline-none focus:ring-2 focus:ring-emerald-500"> | |
| <button class="absolute right-2 top-2 bg-emerald-700 text-white p-2 rounded-full"> | |
| <i class="fas fa-search"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Featured Categories --> | |
| <section class="py-12 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center text-emerald-800 mb-12">Explore Islamic Knowledge</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6"> | |
| <a href="#duas" class="dua-card bg-beige rounded-lg p-6 text-center hover:bg-emerald-700 hover:text-white transition-all"> | |
| <div class="text-4xl text-emerald-700 mb-4"><i class="fas fa-hands-praying"></i></div> | |
| <h3 class="text-xl font-bold mb-2">Daily Duas</h3> | |
| <p class="text-gray-600">Authentic supplications from Quran & Sunnah</p> | |
| </a> | |
| <a href="#names" class="dua-card bg-beige rounded-lg p-6 text-center hover:bg-emerald-700 hover:text-white transition-all"> | |
| <div class="text-4xl text-emerald-700 mb-4"><i class="fas fa-star-and-crescent"></i></div> | |
| <h3 class="text-xl font-bold mb-2">99 Names</h3> | |
| <p class="text-gray-600">Asma-ul-Husna with meanings & benefits</p> | |
| </a> | |
| <a href="#wazaif" class="dua-card bg-beige rounded-lg p-6 text-center hover:bg-emerald-700 hover:text-white transition-all"> | |
| <div class="text-4xl text-emerald-700 mb-4"><i class="fas fa-book-quran"></i></div> | |
| <h3 class="text-xl font-bold mb-2">Islamic Wazaif</h3> | |
| <p class="text-gray-600">Authentic remedies for various needs</p> | |
| </a> | |
| <a href="#videos" class="dua-card bg-beige rounded-lg p-6 text-center hover:bg-emerald-700 hover:text-white transition-all"> | |
| <div class="text-4xl text-emerald-700 mb-4"><i class="fas fa-video"></i></div> | |
| <h3 class="text-xl font-bold mb-2">Video Lectures</h3> | |
| <p class="text-gray-600">Islamic talks by scholars & teachers</p> | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Featured Duas Section --> | |
| <section id="duas" class="py-16 bg-beige"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex justify-between items-center mb-8"> | |
| <h2 class="text-3xl font-bold text-emerald-800">Daily Duas</h2> | |
| <a href="#" class="text-emerald-700 hover:text-emerald-900 font-medium">View All Duas <i class="fas fa-arrow-right ml-1"></i></a> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <!-- Dua Card 1 --> | |
| <div class="dua-card bg-white rounded-lg overflow-hidden shadow-sm fade-in"> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-start mb-4"> | |
| <span class="bg-emerald-100 text-emerald-800 text-xs px-3 py-1 rounded-full">Morning</span> | |
| <button class="text-gray-400 hover:text-emerald-700"> | |
| <i class="far fa-bookmark"></i> | |
| </button> | |
| </div> | |
| <div class="arabic text-right mb-4 leading-relaxed">ุฃูุตูุจูุญูููุง ููุฃูุตูุจูุญู ุงููู ููููู ูููููููุ ููุงููุญูู ูุฏู ูููููููุ ููุง ุฅููููู ุฅููููุง ุงูููููู ููุญูุฏููู ููุง ุดูุฑูููู ูููู</div> | |
| <div class="mb-4"> | |
| <p class="font-medium text-gray-700 mb-1">Transliteration:</p> | |
| <p class="text-gray-600">Asbahna wa asbahal-mulku lillah, walhamdu lillah, la ilaha illallah wahdahu la sharika lah</p> | |
| </div> | |
| <div class="mb-4"> | |
| <p class="font-medium text-gray-700 mb-1">Translation:</p> | |
| <p class="text-gray-600">"We have reached the morning and at this very time all sovereignty belongs to Allah. Praise is to Allah. There is none worthy of worship but Allah, alone, without partner."</p> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <span class="text-xs text-gray-500">Source: Muslim 4/2088</span> | |
| <button class="text-emerald-700 hover:text-emerald-900"> | |
| <i class="fas fa-volume-up"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 px-6 py-3 flex justify-between items-center"> | |
| <button class="text-emerald-700 hover:text-emerald-900 text-sm font-medium"> | |
| <i class="fas fa-copy mr-1"></i> Copy | |
| </button> | |
| <button class="text-emerald-700 hover:text-emerald-900 text-sm font-medium"> | |
| <i class="fas fa-share-alt mr-1"></i> Share | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Dua Card 2 --> | |
| <div class="dua-card bg-white rounded-lg overflow-hidden shadow-sm fade-in"> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-start mb-4"> | |
| <span class="bg-emerald-100 text-emerald-800 text-xs px-3 py-1 rounded-full">Evening</span> | |
| <button class="text-gray-400 hover:text-emerald-700"> | |
| <i class="far fa-bookmark"></i> | |
| </button> | |
| </div> | |
| <div class="arabic text-right mb-4 leading-relaxed">ุงููููููู ูู ุจููู ุฃูู ูุณูููููุงุ ููุจููู ุฃูุตูุจูุญูููุงุ ููุจููู ููุญูููุงุ ููุจููู ููู ููุชูุ ููุฅููููููู ุงููููุดููุฑู</div> | |
| <div class="mb-4"> | |
| <p class="font-medium text-gray-700 mb-1">Transliteration:</p> | |
| <p class="text-gray-600">Allahumma bika amsayna, wa bika asbahna, wa bika nahya, wa bika namutu, wa ilaykan-nushur</p> | |
| </div> | |
| <div class="mb-4"> | |
| <p class="font-medium text-gray-700 mb-1">Translation:</p> | |
| <p class="text-gray-600">"O Allah, by Your leave we have reached the evening and by Your leave we have reached the morning, by Your leave we live and die, and unto You is our resurrection."</p> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <span class="text-xs text-gray-500">Source: Tirmidhi 3391</span> | |
| <button class="text-emerald-700 hover:text-emerald-900"> | |
| <i class="fas fa-volume-up"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 px-6 py-3 flex justify-between items-center"> | |
| <button class="text-emerald-700 hover:text-emerald-900 text-sm font-medium"> | |
| <i class="fas fa-copy mr-1"></i> Copy | |
| </button> | |
| <button class="text-emerald-700 hover:text-emerald-900 text-sm font-medium"> | |
| <i class="fas fa-share-alt mr-1"></i> Share | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Dua Card 3 --> | |
| <div class="dua-card bg-white rounded-lg overflow-hidden shadow-sm fade-in"> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-start mb-4"> | |
| <span class="bg-emerald-100 text-emerald-800 text-xs px-3 py-1 rounded-full">Protection</span> | |
| <button class="text-gray-400 hover:text-emerald-700"> | |
| <i class="far fa-bookmark"></i> | |
| </button> | |
| </div> | |
| <div class="arabic text-right mb-4 leading-relaxed">ุฃูุนููุฐู ุจูููููู ูุงุชู ุงูููููู ุงูุชููุงู ููุงุชู ู ููู ุดูุฑูู ู ูุง ุฎููููู</div> | |
| <div class="mb-4"> | |
| <p class="font-medium text-gray-700 mb-1">Transliteration:</p> | |
| <p class="text-gray-600">A'udhu bi kalimatillahit-tammati min sharri ma khalaq</p> | |
| </div> | |
| <div class="mb-4"> | |
| <p class="font-medium text-gray-700 mb-1">Translation:</p> | |
| <p class="text-gray-600">"I seek refuge in the perfect words of Allah from the evil of what He has created."</p> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <span class="text-xs text-gray-500">Source: Muslim 2708</span> | |
| <button class="text-emerald-700 hover:text-emerald-900"> | |
| <i class="fas fa-volume-up"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 px-6 py-3 flex justify-between items-center"> | |
| <button class="text-emerald-700 hover:text-emerald-900 text-sm font-medium"> | |
| <i class="fas fa-copy mr-1"></i> Copy | |
| </button> | |
| <button class="text-emerald-700 hover:text-emerald-900 text-sm font-medium"> | |
| <i class="fas fa-share-alt mr-1"></i> Share | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- 99 Names Section --> | |
| <section id="names" class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex justify-between items-center mb-8"> | |
| <h2 class="text-3xl font-bold text-emerald-800">99 Names of Allah</h2> | |
| <a href="#" class="text-emerald-700 hover:text-emerald-900 font-medium">View All Names <i class="fas fa-arrow-right ml-1"></i></a> | |
| </div> | |
| <div class="mb-8"> | |
| <div class="relative"> | |
| <input type="text" placeholder="Search names of Allah..." class="w-full px-6 py-3 rounded-full border border-gray-300 focus:outline-none focus:ring-2 focus:ring-emerald-500"> | |
| <button class="absolute right-3 top-3 text-gray-500 hover:text-emerald-700"> | |
| <i class="fas fa-search"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4"> | |
| <!-- Name Card 1 --> | |
| <div class="name-card h-40"> | |
| <div class="name-card-inner h-full"> | |
| <div class="name-card-front h-full bg-emerald-700 text-white rounded-lg p-4 flex flex-col items-center justify-center shadow-md"> | |
| <div class="arabic text-2xl mb-2">ุงูุฑููุญูู ููู</div> | |
| <h3 class="font-bold text-center">Ar-Rahman</h3> | |
| <p class="text-xs text-center opacity-80">The Most Gracious</p> | |
| </div> | |
| <div class="name-card-back h-full bg-emerald-800 text-white rounded-lg p-4 flex flex-col items-center justify-center shadow-md"> | |
| <p class="text-xs text-center mb-2">"The One who continually showers all of creation with blessings and prosperity without any disparity."</p> | |
| <button class="text-xs bg-white text-emerald-800 px-3 py-1 rounded-full mt-2"> | |
| <i class="fas fa-volume-up mr-1"></i> Listen | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Name Card 2 --> | |
| <div class="name-card h-40"> | |
| <div class="name-card-inner h-full"> | |
| <div class="name-card-front h-full bg-emerald-700 text-white rounded-lg p-4 flex flex-col items-center justify-center shadow-md"> | |
| <div class="arabic text-2xl mb-2">ุงูุฑููุญููู ู</div> | |
| <h3 class="font-bold text-center">Ar-Raheem</h3> | |
| <p class="text-xs text-center opacity-80">The Most Merciful</p> | |
| </div> | |
| <div class="name-card-back h-full bg-emerald-800 text-white rounded-lg p-4 flex flex-col items-center justify-center shadow-md"> | |
| <p class="text-xs text-center mb-2">"The One who acts with extreme kindness and bestows His mercy in this life and especially the next to believers."</p> | |
| <button class="text-xs bg-white text-emerald-800 px-3 py-1 rounded-full mt-2"> | |
| <i class="fas fa-volume-up mr-1"></i> Listen | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Name Card 3 --> | |
| <div class="name-card h-40"> | |
| <div class="name-card-inner h-full"> | |
| <div class="name-card-front h-full bg-emerald-700 text-white rounded-lg p-4 flex flex-col items-center justify-center shadow-md"> | |
| <div class="arabic text-2xl mb-2">ุงูู ููููู</div> | |
| <h3 class="font-bold text-center">Al-Malik</h3> | |
| <p class="text-xs text-center opacity-80">The King</p> | |
| </div> | |
| <div class="name-card-back h-full bg-emerald-800 text-white rounded-lg p-4 flex flex-col items-center justify-center shadow-md"> | |
| <p class="text-xs text-center mb-2">"The One who possesses the attribute of complete dominion and sovereignty over all creation."</p> | |
| <button class="text-xs bg-white text-emerald-800 px-3 py-1 rounded-full mt-2"> | |
| <i class="fas fa-volume-up mr-1"></i> Listen | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Name Card 4 --> | |
| <div class="name-card h-40"> | |
| <div class="name-card-inner h-full"> | |
| <div class="name-card-front h-full bg-emerald-700 text-white rounded-lg p-4 flex flex-col items-center justify-center shadow-md"> | |
| <div class="arabic text-2xl mb-2">ุงูููุฏูููุณู</div> | |
| <h3 class="font-bold text-center">Al-Quddus</h3> | |
| <p class="text-xs text-center opacity-80">The Most Holy</p> | |
| </div> | |
| <div class="name-card-back h-full bg-emerald-800 text-white rounded-lg p-4 flex flex-col items-center justify-center shadow-md"> | |
| <p class="text-xs text-center mb-2">"The One who is pure from any imperfection and free from any partner or child."</p> | |
| <button class="text-xs bg-white text-emerald-800 px-3 py-1 rounded-full mt-2"> | |
| <i class="fas fa-volume-up mr-1"></i> Listen | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Name Card 5 --> | |
| <div class="name-card h-40"> | |
| <div class="name-card-inner h-full"> | |
| <div class="name-card-front h-full bg-emerald-700 text-white rounded-lg p-4 flex flex-col items-center justify-center shadow-md"> | |
| <div class="arabic text-2xl mb-2">ุงูุณูููุงูู ู</div> | |
| <h3 class="font-bold text-center">As-Salam</h3> | |
| <p class="text-xs text-center opacity-80">The Source of Peace</p> | |
| </div> | |
| <div class="name-card-back h-full bg-emerald-800 text-white rounded-lg p-4 flex flex-col items-center justify-center shadow-md"> | |
| <p class="text-xs text-center mb-2">"The One who is free from every imperfection and through whom all safety and security prevails."</p> | |
| <button class="text-xs bg-white text-emerald-800 px-3 py-1 rounded-full mt-2"> | |
| <i class="fas fa-volume-up mr-1"></i> Listen | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Wazaif Section --> | |
| <section id="wazaif" class="py-16 bg-beige"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex justify-between items-center mb-8"> | |
| <h2 class="text-3xl font-bold text-emerald-800">Islamic Wazaif</h2> | |
| <a href="#" class="text-emerald-700 hover:text-emerald-900 font-medium">View All Wazaif <i class="fas fa-arrow-right ml-1"></i></a> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <!-- Wazifa Card 1 --> | |
| <div class="dua-card bg-white rounded-lg overflow-hidden shadow-sm"> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-start mb-4"> | |
| <span class="bg-emerald-100 text-emerald-800 text-xs px-3 py-1 rounded-full">Rizq</span> | |
| <button class="text-gray-400 hover:text-emerald-700"> | |
| <i class="far fa-bookmark"></i> | |
| </button> | |
| </div> | |
| <h3 class="text-xl font-bold text-emerald-800 mb-3">Wazifa for Increase in Rizq</h3> | |
| <div class="mb-4"> | |
| <p class="font-medium text-gray-700 mb-1">Recitation:</p> | |
| <div class="arabic text-right mb-2 leading-relaxed">ููุง ููุงุณูุนู ุงููู ูุบูููุฑูุฉู</div> | |
| <p class="text-gray-600">"Ya Wasi'al-Maghfirah" (O All-Encompassing in Forgiveness)</p> | |
| </div> | |
| <div class="mb-4"> | |
| <p class="font-medium text-gray-700 mb-1">Method:</p> | |
| <ul class="list-disc list-inside text-gray-600 text-sm space-y-1"> | |
| <li>Recite 100 times after Fajr prayer</li> | |
| <li>Blow on your hands and rub them over your face</li> | |
| <li>Continue for 40 days</li> | |
| </ul> | |
| </div> | |
| <div class="mb-4"> | |
| <p class="font-medium text-gray-700 mb-1">Source:</p> | |
| <p class="text-gray-600 text-sm">From the Sunnah of Prophet Muhammad (peace be upon him)</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Wazifa Card 2 --> | |
| <div class="dua-card bg-white rounded-lg overflow-hidden shadow-sm"> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-start mb-4"> | |
| <span class="bg-emerald-100 text-emerald-800 text-xs px-3 py-1 rounded-full">Protection</span> | |
| <button class="text-gray-400 hover:text-emerald-700"> | |
| <i class="far fa-bookmark"></i> | |
| </button> | |
| </div> | |
| <h3 class="text-xl font-bold text-emerald-800 mb-3">Wazifa for Protection from Evil</h3> | |
| <div class="mb-4"> | |
| <p class="font-medium text-gray-700 mb-1">Recitation:</p> | |
| <div class="arabic text-right mb-2 leading-relaxed">ุฃูุนููุฐู ุจูููููู ูุงุชู ุงูููููู ุงูุชููุงู ููุงุชู ู ููู ุดูุฑูู ู ูุง ุฎููููู</div> | |
| <p class="text-gray-600">"A'udhu bi kalimatillahit-tammati min sharri ma khalaq"</p> | |
| </div> | |
| <div class="mb-4"> | |
| <p class="font-medium text-gray-700 mb-1">Method:</p> | |
| <ul class="list-disc list-inside text-gray-600 text-sm space-y-1"> | |
| <li>Recite 3 times morning and evening</li> | |
| <li>Recite before sleeping</li> | |
| <li>Can be recited for children's protection</li> | |
| </ul> | |
| </div> | |
| <div class="mb-4"> | |
| <p class="font-medium text-gray-700 mb-1">Source:</p> | |
| <p class="text-gray-600 text-sm">Sahih Muslim 2708</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Wazifa Card 3 --> | |
| <div class="dua-card bg-white rounded-lg overflow-hidden shadow-sm"> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-start mb-4"> | |
| <span class="bg-emerald-100 text-emerald-800 text-xs px-3 py-1 rounded-full">Healing</span> | |
| <button class="text-gray-400 hover:text-emerald-700"> | |
| <i class="far fa-bookmark"></i> | |
| </button> | |
| </div> | |
| <h3 class="text-xl font-bold text-emerald-800 mb-3">Wazifa for Shifa (Healing)</h3> | |
| <div class="mb-4"> | |
| <p class="font-medium text-gray-700 mb-1">Recitation:</p> | |
| <div class="arabic text-right mb-2 leading-relaxed">ุจูุณูู ู ุงูููููู ุฃูุฑูููููู ู ููู ููููู ุดูููุกู ููุคูุฐูููู ู ููู ุดูุฑูู ููููู ููููุณู ุฃููู ุนููููู ุญูุงุณูุฏู ุงูููููู ููุดูููููู ุจูุณูู ู ุงูููููู ุฃูุฑูููููู</div> | |
| <p class="text-gray-600">"Bismillahi arqeeka min kulli shay'in yu'dheeka, min sharri kulli nafsin aw 'aynin hasidin, Allahu yashfeek, bismillahi arqeek"</p> | |
| </div> | |
| <div class="mb-4"> | |
| <p class="font-medium text-gray-700 mb-1">Method:</p> | |
| <ul class="list-disc list-inside text-gray-600 text-sm space-y-1"> | |
| <li>Recite over olive oil 7 times</li> | |
| <li>Apply on affected area</li> | |
| <li>Can also recite directly on patient</li> | |
| </ul> | |
| </div> | |
| <div class="mb-4"> | |
| <p class="font-medium text-gray-700 mb-1">Source:</p> | |
| <p class="text-gray-600 text-sm">Sahih Muslim 2186</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Articles Section --> | |
| <section id="articles" class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex justify-between items-center mb-8"> | |
| <h2 class="text-3xl font-bold text-emerald-800">Islamic Articles</h2> | |
| <a href="#" class="text-emerald-700 hover:text-emerald-900 font-medium">View All Articles <i class="fas fa-arrow-right ml-1"></i></a> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Article 1 --> | |
| <div class="dua-card bg-beige rounded-lg overflow-hidden shadow-sm"> | |
| <div class="h-48 bg-emerald-800 flex items-center justify-center"> | |
| <i class="fas fa-book-open text-white text-5xl"></i> | |
| </div> | |
| <div class="p-6"> | |
| <span class="text-xs text-emerald-700">Spirituality</span> | |
| <h3 class="text-xl font-bold text-emerald-800 mt-1 mb-2">Purification of the Heart in Islam</h3> | |
| <p class="text-gray-600 text-sm mb-4">Learn about the Islamic concept of tazkiyah (purification) and practical steps to cleanse your heart from negative traits...</p> | |
| <div class="flex justify-between items-center text-sm"> | |
| <span class="text-gray-500">By: Mufti Abdullah</span> | |
| <span class="text-gray-500">May 15, 2023</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Article 2 --> | |
| <div class="dua-card bg-beige rounded-lg overflow-hidden shadow-sm"> | |
| <div class="h-48 bg-emerald-800 flex items-center justify-center"> | |
| <i class="fas fa-mosque text-white text-5xl"></i> | |
| </div> | |
| <div class="p-6"> | |
| <span class="text-xs text-emerald-700">Ramadan</span> | |
| <h3 class="text-xl font-bold text-emerald-800 mt-1 mb-2">Maximizing Your Ramadan: A Complete Guide</h3> | |
| <p class="text-gray-600 text-sm mb-4">Practical tips and spiritual advice to make the most of the blessed month of Ramadan, from fasting to night prayers...</p> | |
| <div class="flex justify-between items-center text-sm"> | |
| <span class="text-gray-500">By: Dr. Aisha Khan</span> | |
| <span class="text-gray-500">March 1, 2023</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Article 3 --> | |
| <div class="dua-card bg-beige rounded-lg overflow-hidden shadow-sm"> | |
| <div class="h-48 bg-emerald-800 flex items-center justify-center"> | |
| <i class="fas fa-hands-helping text-white text-5xl"></i> | |
| </div> | |
| <div class="p-6"> | |
| <span class="text-xs text-emerald-700">Family</span> | |
| <h3 class="text-xl font-bold text-emerald-800 mt-1 mb-2">Islamic Parenting in the Modern Age</h3> | |
| <p class="text-gray-600 text-sm mb-4">How to raise righteous children while navigating the challenges of modern society, based on Quran and Sunnah...</p> | |
| <div class="flex justify-between items-center text-sm"> | |
| <span class="text-gray-500">By: Ustadh Ibrahim</span> | |
| <span class="text-gray-500">January 20, 2023</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Videos Section --> | |
| <section id="videos" class="py-16 bg-beige"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex justify-between items-center mb-8"> | |
| <h2 class="text-3xl font-bold text-emerald-800">Video Lectures</h2> | |
| <a href="#" class="text-emerald-700 hover:text-emerald-900 font-medium">View All Videos <i class="fas fa-arrow-right ml-1"></i></a> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <!-- Video 1 --> | |
| <div class="dua-card bg-white rounded-lg overflow-hidden shadow-sm"> | |
| <div class="relative pt-[56.25%] bg-gray-200"> | |
| <div class="absolute inset-0 flex items-center justify-center"> | |
| <i class="fas fa-play-circle text-emerald-700 text-5xl"></i> | |
| </div> | |
| <div class="absolute bottom-2 right-2 bg-black bg-opacity-70 text-white text-xs px-2 py-1 rounded">45:12</div> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-bold text-emerald-800 mb-1">The Power of Dua in Islam</h3> | |
| <p class="text-gray-600 text-sm mb-2">A comprehensive lecture on the importance of supplication and how to make effective duas</p> | |
| <div class="flex justify-between items-center text-xs text-gray-500"> | |
| <span>Dr. Yasir Qadhi</span> | |
| <span>12K views</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Video 2 --> | |
| <div class="dua-card bg-white rounded-lg overflow-hidden shadow-sm"> | |
| <div class="relative pt-[56.25%] bg-gray-200"> | |
| <div class="absolute inset-0 flex items-center justify-center"> | |
| <i class="fas fa-play-circle text-emerald-700 text-5xl"></i> | |
| </div> | |
| <div class="absolute bottom-2 right-2 bg-black bg-opacity-70 text-white text-xs px-2 py-1 rounded">1:12:45</div> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-bold text-emerald-800 mb-1">Tafsir of Surah Al-Kahf</h3> | |
| <p class="text-gray-600 text-sm mb-2">Verse by verse explanation of Surah Al-Kahf and its relevance to our times</p> | |
| <div class="flex justify-between items-center text-xs text-gray-500"> | |
| <span>Mufti Menk</span> | |
| <span>25K views</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Video 3 --> | |
| <div class="dua-card bg-white rounded-lg overflow-hidden shadow-sm"> | |
| <div class="relative pt-[56.25%] bg-gray-200"> | |
| <div class="absolute inset-0 flex items-center justify-center"> | |
| <i class="fas fa-play-circle text-emerald-700 text-5xl"></i> | |
| </div> | |
| <div class="absolute bottom-2 right-2 bg-black bg-opacity-70 text-white text-xs px-2 py-1 rounded">32:18</div> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-bold text-emerald-800 mb-1">Daily Morning & Evening Adhkar</h3> | |
| <p class="text-gray-600 text-sm mb-2">Learn the authentic morning and evening remembrances from the Sunnah</p> | |
| <div class="flex justify-between items-center text-xs text-gray-500"> | |
| <span>Sh. Omar Suleiman</span> | |
| <span>18K views</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Newsletter Section --> | |
| <section class="py-16 bg-emerald-800 text-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="max-w-3xl mx-auto text-center"> | |
| <h2 class="text-3xl font-bold mb-4">Stay Connected</h2> | |
| <p class="mb-8">Subscribe to our newsletter to receive weekly duas, articles, and updates directly to your inbox.</p> | |
| <div class="flex flex-col md:flex-row gap-4 max-w-xl mx-auto"> | |
| <input type="email" placeholder="Your email address" class="flex-grow px-6 py-3 rounded-full text-gray-800 focus:outline-none"> | |
| <button class="bg-white text-emerald-800 hover:bg-gray-100 px-6 py-3 rounded-full font-medium whitespace-nowrap">Subscribe Now</button> | |
| </div> | |
| <p class="text-sm mt-4 opacity-80">We respect your privacy. Unsubscribe at any time.</p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-emerald-900 text-white pt-12 pb-6"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8"> | |
| <div> | |
| <h3 class="text-xl font-bold mb-4">Rabbana.pk</h3> | |
| <p class="text-emerald-200 text-sm">A platform dedicated to authentic Islamic knowledge, spirituality, and personal development based on Quran and Sunnah.</p> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-bold mb-4">Quick Links</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#home" class="text-emerald-200 hover:text-white">Home</a></li> | |
| <li><a href="#duas" class="text-emerald-200 hover:text-white">Duas</a></li> | |
| <li><a href="#names" class="text-emerald-200 hover:text-white">99 Names</a></li> | |
| <li><a href="#wazaif" class="text-emerald-200 hover:text-white">Wazaif</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-bold mb-4">Resources</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#articles" class="text-emerald-200 hover:text-white">Articles</a></li> | |
| <li><a href="#videos" class="text-emerald-200 hover:text-white">Videos</a></li> | |
| <li><a href="#" class="text-emerald-200 hover:text-white">Mobile App</a></li> | |
| <li><a href="#" class="text-emerald-200 hover:text-white">Support Us</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-bold mb-4">Connect</h3> | |
| <div class="flex space-x-4 mb-4"> | |
| <a href="#" class="text-emerald-200 hover:text-white text-xl"><i class="fab fa-facebook-f"></i></a> | |
| <a href="#" class="text-emerald-200 hover:text-white text-xl"><i class="fab fa-instagram"></i></a> | |
| <a href="#" class="text-emerald-200 hover:text-white text-xl"><i class="fab fa-youtube"></i></a> | |
| <a href="#" class="text-emerald-200 hover:text-white text-xl"><i class="fab fa-telegram"></i></a> | |
| </div> | |
| <p class="text-emerald-200 text-sm">contact@rabbana.pk</p> | |
| </div> | |
| </div> | |
| <div class="pt-6 border-t border-emerald-800 text-center"> | |
| <p class="arabic text-xl mb-4">ููููู ุฑููุจูู ุฒูุฏูููู ุนูููู ูุง</p> | |
| <p class="text-emerald-200 text-sm mb-2">"And say: My Lord, increase me in knowledge." (Quran 20:114)</p> | |
| <p class="text-emerald-200 text-xs">ยฉ 2023 Rabbana.pk. All rights reserved.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Mobile Menu Toggle | |
| const mobileMenuButton = document.getElementById('mobileMenuButton'); | |
| const mobileMenu = document.getElementById('mobileMenu'); | |
| mobileMenuButton.addEventListener('click', () => { | |
| mobileMenu.classList.toggle('hidden'); | |
| }); | |
| // Dark Mode Toggle | |
| const darkModeToggle = document.getElementById('darkModeToggle'); | |
| const body = document.body; | |
| darkModeToggle.addEventListener('click', () => { | |
| body.classList.toggle('dark-mode'); | |
| if (body.classList.contains('dark-mode')) { | |
| darkModeToggle.innerHTML = '<i class="fas fa-sun"></i>'; | |
| localStorage.setItem('darkMode', 'enabled'); | |
| } else { | |
| darkModeToggle.innerHTML = '<i class="fas fa-moon"></i>'; | |
| localStorage.setItem('darkMode', 'disabled'); | |
| } | |
| }); | |
| // Check for saved dark mode preference | |
| if (localStorage.getItem('darkMode') === 'enabled') { | |
| body.classList.add('dark-mode'); | |
| darkModeToggle.innerHTML = '<i class="fas fa-sun"></i>'; | |
| } | |
| // Smooth scrolling for anchor links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| const targetId = this.getAttribute('href'); | |
| const targetElement = document.querySelector(targetId); | |
| if (targetElement) { | |
| window.scrollTo({ | |
| top: targetElement.offsetTop - 80, | |
| behavior: 'smooth' | |
| }); | |
| // Close mobile menu if open | |
| if (!mobileMenu.classList.contains('hidden')) { | |
| mobileMenu.classList.add('hidden'); | |
| } | |
| } | |
| }); | |
| }); | |
| // Add fade-in animation to elements when they come into view | |
| const fadeElements = document.querySelectorAll('.fade-in'); | |
| const fadeInObserver = new IntersectionObserver((entries) => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| entry.target.classList.add('animate-fadeIn'); | |
| } | |
| }); | |
| }, { threshold: 0.1 }); | |
| fadeElements.forEach(element => { | |
| fadeInObserver.observe(element); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - ๐งฌ <a href="https://enzostvs-deepsite.hf.space?remix=us3aaa/rabbana2" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |