|
|
<!DOCTYPE html> |
|
|
<html lang="fr"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Nur Al-Qouloub - La lumière des cœurs croyants</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=Poppins:wght@300;400;600;700&display=swap'); |
|
|
|
|
|
body { |
|
|
font-family: 'Poppins', sans-serif; |
|
|
background-color: #f8f5f0; |
|
|
} |
|
|
|
|
|
.arabic { |
|
|
font-family: 'Amiri', serif; |
|
|
font-size: 1.2em; |
|
|
line-height: 1.8; |
|
|
} |
|
|
|
|
|
.hero-gradient { |
|
|
background: linear-gradient(135deg, #1e3a8a 0%, #0ea5e9 100%); |
|
|
} |
|
|
|
|
|
.card-hover:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); |
|
|
} |
|
|
|
|
|
.transition-all { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.bookmark-icon { |
|
|
position: absolute; |
|
|
top: -10px; |
|
|
right: 20px; |
|
|
background-color: #f59e0b; |
|
|
color: white; |
|
|
width: 40px; |
|
|
height: 40px; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
border-radius: 50%; |
|
|
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="text-gray-800"> |
|
|
|
|
|
<header class="hero-gradient text-white py-12 px-4 md:px-8 rounded-b-3xl shadow-lg"> |
|
|
<div class="container mx-auto max-w-6xl"> |
|
|
<div class="flex flex-col md:flex-row items-center justify-between"> |
|
|
<div class="md:w-2/3 mb-8 md:mb-0"> |
|
|
<h1 class="text-3xl md:text-5xl font-bold mb-4 flex items-center"> |
|
|
<i class="fas fa-moon mr-3"></i> Nur Al-Qouloub |
|
|
</h1> |
|
|
<p class="text-lg md:text-xl opacity-90 mb-6">La lumière des cœurs croyants</p> |
|
|
<p class="text-white opacity-80 mb-8">Chaque jour, un rappel, un conseil et une sagesse issue du Coran et de la Sunna pour te rapprocher d'Allah ﷻ.</p> |
|
|
<div class="flex flex-wrap gap-3"> |
|
|
<a href="#rappel" class="bg-white text-blue-800 hover:bg-blue-50 px-6 py-3 rounded-full font-semibold transition-all shadow-md"> |
|
|
<i class="fas fa-book-open mr-2"></i> Rappel du jour |
|
|
</a> |
|
|
<a href="#produits" class="bg-yellow-400 hover:bg-yellow-300 text-yellow-900 px-6 py-3 rounded-full font-semibold transition-all shadow-md"> |
|
|
<i class="fas fa-shopping-cart mr-2"></i> Produits utiles |
|
|
</a> |
|
|
<a href="https://www.tiktok.com/@tips.coran1" target="_blank" class="bg-black hover:bg-gray-800 text-white px-6 py-3 rounded-full font-semibold transition-all shadow-md"> |
|
|
<i class="fab fa-tiktok mr-2"></i> Suivez-nous |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
<div class="md:w-1/3 flex justify-center"> |
|
|
<div class="relative"> |
|
|
<img src="https://images.unsplash.com/photo-1568219656418-15c329312bf1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80" alt="Mosquée" class="w-64 h-64 md:w-80 md:h-80 object-cover rounded-full border-4 border-white shadow-xl"> |
|
|
<div class="absolute -bottom-2 -right-2 bg-green-500 text-white p-3 rounded-full shadow-lg"> |
|
|
<i class="fas fa-quran text-2xl"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<main class="container mx-auto max-w-6xl px-4 md:px-8 py-12"> |
|
|
|
|
|
<section id="rappel" class="mb-16"> |
|
|
<div class="relative bg-white rounded-2xl shadow-lg overflow-hidden mb-12 transition-all card-hover"> |
|
|
<div class="bookmark-icon"> |
|
|
<i class="fas fa-bookmark"></i> |
|
|
</div> |
|
|
<div class="p-8"> |
|
|
<div class="flex items-center mb-6"> |
|
|
<div class="bg-blue-100 text-blue-800 p-3 rounded-full mr-4"> |
|
|
<i class="fas fa-lightbulb text-2xl"></i> |
|
|
</div> |
|
|
<h2 class="text-2xl md:text-3xl font-bold text-gray-800">Rappel du Jour – La patience est lumière</h2> |
|
|
</div> |
|
|
|
|
|
<blockquote class="border-l-4 border-yellow-400 pl-6 py-2 my-6 bg-yellow-50 rounded-r-lg"> |
|
|
<p class="arabic text-xl italic mb-2">"الصبر نور"</p> |
|
|
<p class="text-lg font-medium text-gray-700">Le Prophète ﷺ a dit : <span class="italic">"La patience est une lumière."</span> (Muslim)</p> |
|
|
</blockquote> |
|
|
|
|
|
<div class="prose max-w-none text-gray-700 mb-6"> |
|
|
<p>Dans les épreuves, la patience est le lien invisible entre le croyant et son Seigneur. C'est par elle que le cœur se fortifie et que les péchés s'effacent.</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-blue-50 border border-blue-100 rounded-xl p-5"> |
|
|
<div class="flex items-start"> |
|
|
<div class="bg-blue-100 text-blue-800 p-2 rounded-full mr-4 mt-1"> |
|
|
<i class="fas fa-lightbulb"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-bold text-blue-800 mb-1">Astuce du jour :</h3> |
|
|
<p>En cas de colère, fais l'ablution. Le feu ne s'éteint que par l'eau.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gradient-to-r from-green-600 to-emerald-700 rounded-2xl shadow-lg overflow-hidden transition-all card-hover"> |
|
|
<div class="p-8 text-white"> |
|
|
<div class="flex items-center mb-6"> |
|
|
<div class="bg-white text-green-700 p-3 rounded-full mr-4"> |
|
|
<i class="fas fa-quran text-2xl"></i> |
|
|
</div> |
|
|
<h2 class="text-2xl md:text-3xl font-bold">Verset en lumière</h2> |
|
|
</div> |
|
|
|
|
|
<blockquote class="border-l-4 border-yellow-300 pl-6 py-2 my-6 bg-white bg-opacity-10 rounded-r-lg"> |
|
|
<p class="arabic text-xl mb-2">"ذَٰلِكَ الْكِتَابُ لَا رَيْبَ ۛ فِيهِ ۛ هُدًى لِّلْمُتَّقِينَ"</p> |
|
|
<p class="text-lg font-medium">Sourate Al-Baqara – Verset 2 : <span class="italic">"Ceci est le Livre au sujet duquel il n'y a aucun doute, c'est un guide pour les pieux."</span></p> |
|
|
</blockquote> |
|
|
|
|
|
<div class="prose max-w-none text-white text-opacity-90"> |
|
|
<p>Le Coran est bien plus qu'un livre. Il est un mode de vie. Il éclaire, il corrige, il purifie. Chaque verset est une clé pour ouvrir les portes de la guidance divine.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="produits" class="mb-16"> |
|
|
<div class="text-center mb-12"> |
|
|
<h2 class="text-3xl font-bold text-gray-800 mb-4">Produits recommandés</h2> |
|
|
<p class="text-gray-600 max-w-2xl mx-auto">Voici une sélection rigoureuse de produits pour enrichir ta foi. Chaque lien est un lien affilié Amazon – en commandant via ce site, tu aides à financer la da'wa, sans coût supplémentaire pour toi.</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6"> |
|
|
|
|
|
<div class="bg-white rounded-xl shadow-md overflow-hidden transition-all card-hover"> |
|
|
<div class="relative"> |
|
|
<img src="https://images.unsplash.com/photo-1605311588588-44c1ef0e7cfe?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80" alt="Tapis de prière" class="w-full h-48 object-cover"> |
|
|
<div class="absolute top-2 right-2 bg-red-500 text-white text-xs font-bold px-2 py-1 rounded">Nouveau</div> |
|
|
</div> |
|
|
<div class="p-5"> |
|
|
<h3 class="font-bold text-lg mb-2">Tapis de prière mémoire</h3> |
|
|
<p class="text-gray-600 text-sm mb-4">Confort + design qibla intelligent</p> |
|
|
<a href="https://www.amazon.fr/ton-lien-affilié1" target="_blank" class="inline-block bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg text-sm font-medium transition-all"> |
|
|
<i class="fas fa-shopping-cart mr-2"></i> Voir sur Amazon |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-xl shadow-md overflow-hidden transition-all card-hover"> |
|
|
<img src="https://images.unsplash.com/photo-1544717305-2782549b5136?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80" alt="Coran" class="w-full h-48 object-cover"> |
|
|
<div class="p-5"> |
|
|
<h3 class="font-bold text-lg mb-2">Coran Arabe-Français</h3> |
|
|
<p class="text-gray-600 text-sm mb-4">Traduction simple avec phonétique</p> |
|
|
<a href="https://www.amazon.fr/ton-lien-affilié2" target="_blank" class="inline-block bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg text-sm font-medium transition-all"> |
|
|
<i class="fas fa-shopping-cart mr-2"></i> Voir sur Amazon |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-xl shadow-md overflow-hidden transition-all card-hover"> |
|
|
<img src="https://images.unsplash.com/photo-1602002672592-40d5e9fda8f7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80" alt="Chapelet numérique" class="w-full h-48 object-cover"> |
|
|
<div class="p-5"> |
|
|
<h3 class="font-bold text-lg mb-2">Chapelet numérique</h3> |
|
|
<p class="text-gray-600 text-sm mb-4">Tasbih pratique & discret</p> |
|
|
<a href="https://www.amazon.fr/ton-lien-affilié3" target="_blank" class="inline-block bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg text-sm font-medium transition-all"> |
|
|
<i class="fas fa-shopping-cart mr-2"></i> Voir sur Amazon |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-xl shadow-md overflow-hidden transition-all card-hover"> |
|
|
<img src="https://images.unsplash.com/photo-1607619056574-7b8d3ee536b2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80" alt="Encens Bakhour" class="w-full h-48 object-cover"> |
|
|
<div class="p-5"> |
|
|
<h3 class="font-bold text-lg mb-2">Encens Bakhour</h3> |
|
|
<p class="text-gray-600 text-sm mb-4">Ambiance spirituelle pour la maison</p> |
|
|
<a href="https://www.amazon.fr/ton-lien-affilié4" target="_blank" class="inline-block bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg text-sm font-medium transition-all"> |
|
|
<i class="fas fa-shopping-cart mr-2"></i> Voir sur Amazon |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="mb-16"> |
|
|
<div class="text-center mb-12"> |
|
|
<h2 class="text-3xl font-bold text-gray-800 mb-4">Articles et Conseils</h2> |
|
|
<p class="text-gray-600 max-w-2xl mx-auto">Découvrez nos articles pour approfondir votre connaissance et pratique de l'Islam.</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6"> |
|
|
|
|
|
<div class="bg-white rounded-xl shadow-md overflow-hidden transition-all card-hover"> |
|
|
<img src="https://images.unsplash.com/photo-1564121211835-e88c852648ab?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80" alt="Prière" class="w-full h-40 object-cover"> |
|
|
<div class="p-5"> |
|
|
<h3 class="font-bold text-lg mb-2">5 erreurs à éviter pendant la prière</h3> |
|
|
<p class="text-gray-600 text-sm mb-4">Découvrez les erreurs courantes qui peuvent invalider votre prière.</p> |
|
|
<a href="#" class="text-blue-600 hover:text-blue-800 text-sm font-medium transition-all flex items-center"> |
|
|
Lire l'article <i class="fas fa-arrow-right ml-2"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-xl shadow-md overflow-hidden transition-all card-hover"> |
|
|
<img src="https://images.unsplash.com/photo-1540202404-5a7b4f9d1533?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80" alt="Coran" class="w-full h-40 object-cover"> |
|
|
<div class="p-5"> |
|
|
<h3 class="font-bold text-lg mb-2">Comment méditer sur le Coran (Tadabbur)</h3> |
|
|
<p class="text-gray-600 text-sm mb-4">Techniques pour une lecture profonde et méditative du Coran.</p> |
|
|
<a href="#" class="text-blue-600 hover:text-blue-800 text-sm font-medium transition-all flex items-center"> |
|
|
Lire l'article <i class="fas fa-arrow-right ml-2"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-xl shadow-md overflow-hidden transition-all card-hover"> |
|
|
<img src="https://images.unsplash.com/photo-1568217549901-70cc1106a0a9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80" alt="Invocations" class="w-full h-40 object-cover"> |
|
|
<div class="p-5"> |
|
|
<h3 class="font-bold text-lg mb-2">Astuces pour rester constant dans les invocations</h3> |
|
|
<p class="text-gray-600 text-sm mb-4">Comment intégrer les douas dans votre quotidien.</p> |
|
|
<a href="#" class="text-blue-600 hover:text-blue-800 text-sm font-medium transition-all flex items-center"> |
|
|
Lire l'article <i class="fas fa-arrow-right ml-2"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-xl shadow-md overflow-hidden transition-all card-hover"> |
|
|
<img src="https://images.unsplash.com/photo-1568219656418-15c329312bf1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80" alt="Mosquée" class="w-full h-40 object-cover"> |
|
|
<div class="p-5"> |
|
|
<h3 class="font-bold text-lg mb-2">10 invocations à apprendre par cœur avec sens</h3> |
|
|
<p class="text-gray-600 text-sm mb-4">Les douas essentiels pour chaque musulman.</p> |
|
|
<a href="#" class="text-blue-600 hover:text-blue-800 text-sm font-medium transition-all flex items-center"> |
|
|
Lire l'article <i class="fas fa-arrow-right ml-2"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="mb-16"> |
|
|
<div class="bg-white rounded-2xl shadow-lg overflow-hidden"> |
|
|
<div class="md:flex"> |
|
|
<div class="md:w-1/3"> |
|
|
<img src="https://images.unsplash.com/photo-1564564244660-5d73c057f2d9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80" alt="Auteur" class="w-full h-full object-cover"> |
|
|
</div> |
|
|
<div class="md:w-2/3 p-8"> |
|
|
<h2 class="text-3xl font-bold text-gray-800 mb-6">À propos</h2> |
|
|
<div class="prose max-w-none text-gray-700 mb-6"> |
|
|
<p>Je suis un jeune musulman engagé dans la da'wa numérique. À travers TikTok (@tips.coran1) et ce site, je partage des rappels, des connaissances, et des outils pour booster ta relation avec Allah. Chaque jour est une opportunité pour se rapprocher de Lui.</p> |
|
|
<p class="mt-4">Mon objectif est de rendre l'Islam accessible et vivant pour les jeunes générations, avec un contenu authentique, pratique et inspirant.</p> |
|
|
</div> |
|
|
<div class="flex space-x-4"> |
|
|
<a href="https://www.tiktok.com/@tips.coran1" target="_blank" class="bg-gray-800 hover:bg-gray-700 text-white px-6 py-3 rounded-full font-medium transition-all flex items-center"> |
|
|
<i class="fab fa-tiktok mr-2"></i> TikTok |
|
|
</a> |
|
|
<a href="#" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-full font-medium transition-all flex items-center"> |
|
|
<i class="fab fa-instagram mr-2"></i> Instagram |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="mb-16"> |
|
|
<div class="bg-gradient-to-r from-purple-600 to-indigo-700 rounded-2xl shadow-lg overflow-hidden p-8 text-white"> |
|
|
<div class="md:flex items-center justify-between"> |
|
|
<div class="md:w-2/3 mb-8 md:mb-0"> |
|
|
<h2 class="text-2xl md:text-3xl font-bold mb-4">Inscription à la newsletter</h2> |
|
|
<p class="text-white text-opacity-90 mb-6">📩 Reçois chaque vendredi un rappel, une astuce spirituelle, et une recommandation utile directement dans ta boîte mail.</p> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-gift text-2xl mr-4"></i> |
|
|
<p class="text-sm">Les premiers inscrits recevront un ebook gratuit "30 jours pour se rapprocher d'Allah"</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="md:w-1/3"> |
|
|
<form class="bg-white bg-opacity-20 p-6 rounded-xl backdrop-blur-sm"> |
|
|
<div class="mb-4"> |
|
|
<label class="block text-white text-sm font-medium mb-2">Prénom</label> |
|
|
<input type="text" class="w-full px-4 py-3 rounded-lg bg-white bg-opacity-20 border border-white border-opacity-30 focus:outline-none focus:ring-2 focus:ring-white focus:ring-opacity-50 placeholder-white placeholder-opacity-70" placeholder="Votre prénom"> |
|
|
</div> |
|
|
<div class="mb-6"> |
|
|
<label class="block text-white text-sm font-medium mb-2">Email</label> |
|
|
<input type="email" class="w-full px-4 py-3 rounded-lg bg-white bg-opacity-20 border border-white border-opacity-30 focus:outline-none focus:ring-2 focus:ring-white focus:ring-opacity-50 placeholder-white placeholder-opacity-70" placeholder="Votre email"> |
|
|
</div> |
|
|
<button type="submit" class="w-full bg-white text-purple-700 hover:bg-gray-100 font-bold py-3 px-4 rounded-lg transition-all shadow-md"> |
|
|
Je m'inscris ! |
|
|
</button> |
|
|
</form> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
</main> |
|
|
|
|
|
|
|
|
<footer class="bg-gray-900 text-white py-12 px-4 md:px-8"> |
|
|
<div class="container mx-auto max-w-6xl"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8"> |
|
|
<div> |
|
|
<h3 class="text-xl font-bold mb-4 flex items-center"> |
|
|
<i class="fas fa-moon mr-2"></i> Nur Al-Qouloub |
|
|
</h3> |
|
|
<p class="text-gray-400">La lumière des cœurs croyants. Partage quotidien de rappels islamiques.</p> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h3 class="text-lg font-bold mb-4">Navigation</h3> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#rappel" class="text-gray-400 hover:text-white transition-all">Rappel du jour</a></li> |
|
|
<li><a href="#produits" class="text-gray-400 hover:text-white transition-all">Produits utiles</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition-all">Articles</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition-all">À propos</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h3 class="text-lg font-bold mb-4">Réseaux sociaux</h3> |
|
|
<div class="flex space-x-4"> |
|
|
<a href="https://www.tiktok.com/@tips.coran1" target="_blank" class="bg-gray-700 hover:bg-gray-600 w-10 h-10 rounded-full flex items-center justify-center transition-all"> |
|
|
<i class="fab fa-tiktok"></i> |
|
|
</a> |
|
|
<a href="#" class="bg-gray-700 hover:bg-gray-600 w-10 h-10 rounded-full flex items-center justify-center transition-all"> |
|
|
<i class="fab fa-instagram"></i> |
|
|
</a> |
|
|
<a href="#" class="bg-gray-700 hover:bg-gray-600 w-10 h-10 rounded-full flex items-center justify-center transition-all"> |
|
|
<i class="fab fa-youtube"></i> |
|
|
</a> |
|
|
<a href="#" class="bg-gray-700 hover:bg-gray-600 w-10 h-10 rounded-full flex items-center justify-center transition-all"> |
|
|
<i class="fab fa-telegram"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h3 class="text-lg font-bold mb-4">Contact</h3> |
|
|
<ul class="space-y-2 text-gray-400"> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-envelope mr-2"></i> contact@nuralqouloub.com |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="border-t border-gray-800 pt-8"> |
|
|
<p class="text-gray-500 text-sm text-center"> |
|
|
© 2025 Nur Al-Qouloub. Tous droits réservés. Ce site contient des liens affiliés Amazon. En tant que partenaire Amazon, je réalise un bénéfice sur les achats qualifiés. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
|
|
|
<button id="backToTop" class="fixed bottom-8 right-8 bg-blue-600 text-white w-12 h-12 rounded-full flex items-center justify-center shadow-lg transition-all opacity-0 invisible hover:bg-blue-700"> |
|
|
<i class="fas fa-arrow-up"></i> |
|
|
</button> |
|
|
|
|
|
<script> |
|
|
|
|
|
const backToTopButton = document.getElementById('backToTop'); |
|
|
|
|
|
window.addEventListener('scroll', () => { |
|
|
if (window.pageYOffset > 300) { |
|
|
backToTopButton.classList.remove('opacity-0', 'invisible'); |
|
|
backToTopButton.classList.add('opacity-100', 'visible'); |
|
|
} else { |
|
|
backToTopButton.classList.remove('opacity-100', 'visible'); |
|
|
backToTopButton.classList.add('opacity-0', 'invisible'); |
|
|
} |
|
|
}); |
|
|
|
|
|
backToTopButton.addEventListener('click', () => { |
|
|
window.scrollTo({ |
|
|
top: 0, |
|
|
behavior: 'smooth' |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
|
|
anchor.addEventListener('click', function (e) { |
|
|
e.preventDefault(); |
|
|
|
|
|
document.querySelector(this.getAttribute('href')).scrollIntoView({ |
|
|
behavior: 'smooth' |
|
|
}); |
|
|
}); |
|
|
}); |
|
|
</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=Tipscoran/github" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
