awais000/ramadan-reflections
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>Knowledge Hub | Ramadan Reflections ๐</title>7 <link rel="icon" type="image/x-icon" href="/static/favicon.ico">8 <script src="https://cdn.tailwindcss.com"></script>9 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>10 <style>11 @import url('https://fonts.googleapis.com/css2?family=Amiri:wght@400;700&family=Poppins:wght@300;400;500&display=swap');12 13 body {14 font-family: 'Poppins', sans-serif;15 background-color: #f8f5f0;16 color: #1a365d;17 }18 19 .arabic {20 font-family: 'Amiri', serif;21 font-size: 1.5rem;22 }23 24 .navy-bg {25 background-color: #1a365d;26 }27 28 .gold-text {29 color: #d4af37;30 }31 32 .article-card {33 transition: transform 0.3s ease, box-shadow 0.3s ease;34 }35 36 .article-card:hover {37 transform: translateY(-5px);38 box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);39 }40 41 .category-btn.active {42 background-color: #1a365d;43 color: white;44 }45 </style>46</head>47<body class="min-h-screen flex flex-col">48 <header class="navy-bg text-white py-4 px-6 shadow-lg">49 <div class="container mx-auto flex justify-between items-center">50 <div class="flex items-center space-x-2">51 <i data-feather="moon" class="gold-text"></i>52 <a href="index.html" class="text-2xl font-bold">Ramadan Reflections</a>53 </div>54 <nav>55 <ul class="flex space-x-6">56 <li><a href="index.html" class="hover:text-yellow-200 transition">Home</a></li>57 <li><a href="prayer-times.html" class="hover:text-yellow-200 transition">Prayer Times</a></li>58 <li><a href="inspiration.html" class="hover:text-yellow-200 transition">Daily Inspiration</a></li>59 <li><a href="knowledge.html" class="hover:text-yellow-200 transition font-semibold">Knowledge Hub</a></li>60 <li><a href="recipes.html" class="hover:text-yellow-200 transition">Recipes</a></li>61 <li><a href="charity.html" class="hover:text-yellow-200 transition">Charity</a></li>62 </ul>63 </nav>64 <button id="darkModeToggle" class="p-2 rounded-full hover:bg-blue-900 transition">65 <i data-feather="moon"></i>66 </button>67 </div>68 </header>69 70 <main class="flex-grow container mx-auto px-4 py-8">71 <section class="mb-12 text-center">72 <h1 class="text-4xl font-bold mb-4">Knowledge Hub</h1>73 <p class="text-lg max-w-2xl mx-auto">Deepen your understanding of Ramadan with these insightful articles</p>74 </section>75 76 <section class="mb-12">77 <div class="flex flex-wrap justify-center gap-4 mb-8">78 <button class="category-btn active px-4 py-2 bg-gray-200 rounded-full hover:bg-gray-300 transition" data-category="all">All Topics</button>79 <button class="category-btn px-4 py-2 bg-gray-200 rounded-full hover:bg-gray-300 transition" data-category="fasting">Fasting</button>80 <button class="category-btn px-4 py-2 bg-gray-200 rounded-full hover:bg-gray-300 transition" data-category="sunnah">Sunnah</button>81 <button class="category-btn px-4 py-2 bg-gray-200 rounded-full hover:bg-gray-300 transition" data-category="quran">Quran</button>82 <button class="category-btn px-4 py-2 bg-gray-200 rounded-full hover:bg-gray-300 transition" data-category="charity">Charity</button>83 <button class="category-btn px-4 py-2 bg-gray-200 rounded-full hover:bg-gray-300 transition" data-category="eid">Eid</button>84 </div>85 86 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">87 <article class="article-card bg-white rounded-xl shadow-md overflow-hidden" data-category="fasting">88 <div class="h-48 bg-cover bg-center" style="background-image: url('http://static.photos/black/640x360/1')"></div>89 <div class="p-6">90 <span class="text-xs font-semibold px-2 py-1 bg-blue-100 text-blue-800 rounded-full">Fasting</span>91 <h3 class="text-xl font-bold my-3">The Virtues of Fasting in Ramadan</h3>92 <p class="text-gray-600 mb-4">Discover the profound spiritual benefits and rewards of fasting during this blessed month.</p>93 <a href="#" class="gold-text font-medium hover:underline">Read Article โ</a>94 </div>95 </article>96 97 <article class="article-card bg-white rounded-xl shadow-md overflow-hidden" data-category="sunnah">98 <div class="h-48 bg-cover bg-center" style="background-image: url('http://static.photos/blue/640x360/2')"></div>99 <div class="p-6">100 <span class="text-xs font-semibold px-2 py-1 bg-green-100 text-green-800 rounded-full">Sunnah</span>101 <h3 class="text-xl font-bold my-3">Prophetic Practices for Ramadan Nights</h3>102 <p class="text-gray-600 mb-4">Learn how the Prophet Muhammad (PBUH) spent his nights during Ramadan and how we can follow his example.</p>103 <a href="#" class="gold-text font-medium hover:underline">Read Article โ</a>104 </div>105 </article>106 107 <article class="article-card bg-white rounded-xl shadow-md overflow-hidden" data-category="quran">108 <div class="h-48 bg-cover bg-center" style="background-image: url('http://static.photos/abstract/640x360/3')"></div>109 <div class="p-6">110 <span class="text-xs font-semibold px-2 py-1 bg-purple-100 text-purple-800 rounded-full">Quran</span>111 <h3 class="text-xl font-bold my-3">Connecting with the Quran in Ramadan</h3>112 <p class="text-gray-600 mb-4">Practical tips to develop a meaningful relationship with the Quran throughout the holy month.</p>113 <a href="#" class="gold-text font-medium hover:underline">Read Article โ</a>114 </div>115 </article>116 117 <article class="article-card bg-white rounded-xl shadow-md overflow-hidden" data-category="charity">118 <div class="h-48 bg-cover bg-center" style="background-image: url('http://static.photos/red/640x360/4')"></div>119 <div class="p-6">120 <span class="text-xs font-semibold px-2 py-1 bg-red-100 text-red-800 rounded-full">Charity</span>121 <h3 class="text-xl font-bold my-3">The Power of Giving in Ramadan</h3>122 <p class="text-gray-600 mb-4">Understand why charity is multiplied during Ramadan and how to maximize your giving.</p>123 <a href="#" class="gold-text font-medium hover:underline">Read Article โ</a>124 </div>125 </article>126 127 <article class="article-card bg-white rounded-xl shadow-md overflow-hidden" data-category="eid">128 <div class="h-48 bg-cover bg-center" style="background-image: url('http://static.photos/yellow/640x360/5')"></div>129 <div class="p-6">130 <span class="text-xs font-semibold px-2 py-1 bg-yellow-100 text-yellow-800 rounded-full">Eid</span>131 <h3 class="text-xl font-bold my-3">Preparing Spiritually for Eid</h3>132 <p class="text-gray-600 mb-4">How to conclude Ramadan with gratitude and carry its blessings into Eid and beyond.</p>133 <a href="#" class="gold-text font-medium hover:underline">Read Article โ</a>134 </div>135 </article>136 137 <article class="article-card bg-white rounded-xl shadow-md overflow-hidden" data-category="fasting">138 <div class="h-48 bg-cover bg-center" style="background-image: url('http://static.photos/green/640x360/6')"></div>139 <div class="p-6">140 <span class="text-xs font-semibold px-2 py-1 bg-blue-100 text-blue-800 rounded-full">Fasting</span>141 <h3 class="text-xl font-bold my-3">Health Benefits of Fasting</h3>142 <p class="text-gray-600 mb-4">Scientific insights into how fasting benefits your body and mind during Ramadan.</p>143 <a href="#" class="gold-text font-medium hover:underline">Read Article โ</a>144 </div>145 </article>146 </div>147 </section>148 149 <section class="bg-white rounded-xl shadow-lg p-8 max-w-4xl mx-auto">150 <h2 class="text-2xl font-bold mb-6">Search Articles</h2>151 <div class="relative">152 <input type="text" placeholder="Search for articles..." class="w-full px-4 py-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-200 pl-12">153 <i data-feather="search" class="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400"></i>154 </div>155 </section>156 </main>157 158 <footer class="navy-bg text-white py-8 px-6">159 <div class="container mx-auto">160 <div class="flex flex-col md:flex-row justify-between items-center">161 <div class="mb-4 md:mb-0">162 <p class="arabic text-2xl mb-2">ุจูุณูู
ู ุงููููููู ุงูุฑููุญูู
ูููฐูู ุงูุฑููุญููู
ู</p>163 <p>ยฉ 2023 Ramadan Reflections. All rights reserved.</p>164 </div>165 <div class="flex space-x-4">166 <a href="#" class="hover:text-yellow-200 transition"><i data-feather="facebook"></i></a>167 <a href="#" class="hover:text-yellow-200 transition"><i data-feather="instagram"></i></a>168 <a href="#" class="hover:text-yellow-200 transition"><i data-feather="twitter"></i></a>169 </div>170 </div>171 </div>172 </footer>173 174 <script>175 // Initialize feather icons176 feather.replace();177 178 // Category filter functionality179 const categoryBtns = document.querySelectorAll('.category-btn');180 const articles = document.querySelectorAll('.article-card');181 182 categoryBtns.forEach(btn => {183 btn.addEventListener('click', () => {184 // Update active button185 categoryBtns.forEach(b => b.classList.remove('active', 'bg-blue-700', 'text-white'));186 btn.classList.add('active', 'bg-blue-700', 'text-white');187 188 const category = btn.dataset.category;189 190 // Filter articles191 articles.forEach(article => {192 if (category === 'all' || article.dataset.category === category) {193 article.style.display = 'block';194 } else {195 article.style.display = 'none';196 }197 });198 });199 });200 </script>201</body>202</html>