|
|
<!DOCTYPE html> |
|
|
<html lang="fr"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>EcoLearn - Plateforme Éducative Verte</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=Poppins:wght@300;400;500;600;700;800;900&display=swap'); |
|
|
|
|
|
:root { |
|
|
--primary: #10b981; |
|
|
--primary-light: #34d399; |
|
|
--primary-dark: #059669; |
|
|
--secondary: #f59e0b; |
|
|
--dark: #1e293b; |
|
|
--light: #f8fafc; |
|
|
} |
|
|
|
|
|
body { |
|
|
font-family: 'Poppins', sans-serif; |
|
|
background-color: #f8fafc; |
|
|
overflow-x: hidden; |
|
|
} |
|
|
|
|
|
.gradient-bg { |
|
|
background: linear-gradient(135deg, var(--primary), var(--primary-light)); |
|
|
} |
|
|
|
|
|
.gradient-bg-dark { |
|
|
background: linear-gradient(135deg, var(--primary-dark), var(--primary)); |
|
|
} |
|
|
|
|
|
.text-gradient { |
|
|
background: linear-gradient(90deg, var(--primary), var(--primary-light)); |
|
|
-webkit-background-clip: text; |
|
|
background-clip: text; |
|
|
color: transparent; |
|
|
} |
|
|
|
|
|
.course-card { |
|
|
transition: all 0.3s ease; |
|
|
border: 1px solid #e5e7eb; |
|
|
} |
|
|
|
|
|
.course-card:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 10px 25px -5px rgba(16, 185, 129, 0.2); |
|
|
border-color: var(--primary-light); |
|
|
} |
|
|
|
|
|
.blob { |
|
|
position: absolute; |
|
|
width: 500px; |
|
|
height: 500px; |
|
|
background: linear-gradient(45deg, var(--primary), var(--primary-light)); |
|
|
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; |
|
|
filter: blur(50px); |
|
|
opacity: 0.15; |
|
|
z-index: 0; |
|
|
animation: blob 20s infinite alternate; |
|
|
} |
|
|
|
|
|
@keyframes blob { |
|
|
0% { transform: translate(0, 0) rotate(0deg); border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; } |
|
|
25% { transform: translate(50px, -50px) rotate(45deg); border-radius: 58% 42% 75% 25% / 76% 46% 54% 24%; } |
|
|
50% { transform: translate(0, -100px) rotate(90deg); border-radius: 50% 50% 33% 67% / 55% 27% 73% 45%; } |
|
|
75% { transform: translate(-50px, -50px) rotate(135deg); border-radius: 33% 67% 25% 75% / 67% 34% 66% 33%; } |
|
|
100% { transform: translate(0, 0) rotate(180deg); border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; } |
|
|
} |
|
|
|
|
|
.hover-scale { |
|
|
transition: transform 0.3s ease; |
|
|
} |
|
|
|
|
|
.hover-scale:hover { |
|
|
transform: scale(1.05); |
|
|
} |
|
|
|
|
|
.glass-effect { |
|
|
background: rgba(255, 255, 255, 0.1); |
|
|
backdrop-filter: blur(10px); |
|
|
-webkit-backdrop-filter: blur(10px); |
|
|
border: 1px solid rgba(255, 255, 255, 0.2); |
|
|
} |
|
|
|
|
|
.nav-link { |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.nav-link::after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
bottom: -2px; |
|
|
left: 0; |
|
|
width: 0; |
|
|
height: 2px; |
|
|
background-color: var(--primary-light); |
|
|
transition: width 0.3s ease; |
|
|
} |
|
|
|
|
|
.nav-link:hover::after { |
|
|
width: 100%; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50 overflow-x-hidden"> |
|
|
|
|
|
<div class="blob top-0 left-0"></div> |
|
|
<div class="blob top-1/3 right-0 animation-delay-2000"></div> |
|
|
<div class="blob bottom-0 left-1/4 animation-delay-4000"></div> |
|
|
|
|
|
|
|
|
<nav class="fixed w-full z-50 py-4 px-6 bg-white shadow-sm"> |
|
|
<div class="container mx-auto flex justify-between items-center"> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<div class="w-10 h-10 rounded-full gradient-bg flex items-center justify-center text-white"> |
|
|
<i class="fas fa-leaf text-xl"></i> |
|
|
</div> |
|
|
<span class="text-xl font-bold text-gray-800">Eco<span class="text-gradient">Learn</span></span> |
|
|
</div> |
|
|
|
|
|
<div class="hidden md:flex space-x-8"> |
|
|
<a href="#" class="nav-link text-gray-700 hover:text-green-600 font-medium">Accueil</a> |
|
|
<a href="#courses" class="nav-link text-gray-700 hover:text-green-600 font-medium">Cours</a> |
|
|
<a href="#" class="nav-link text-gray-700 hover:text-green-600 font-medium">Formateurs</a> |
|
|
<a href="#" class="nav-link text-gray-700 hover:text-green-600 font-medium">À propos</a> |
|
|
<a href="#" class="nav-link text-gray-700 hover:text-green-600 font-medium">Contact</a> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-center space-x-4"> |
|
|
<button class="hidden md:block text-gray-700 hover:text-green-600 transition-all"> |
|
|
<i class="fas fa-search text-lg"></i> |
|
|
</button> |
|
|
<button class="hidden md:block px-6 py-2 rounded-full gradient-bg text-white hover:bg-green-500 transition-all shadow-md hover:shadow-lg"> |
|
|
Connexion |
|
|
</button> |
|
|
<button class="md:hidden text-gray-700"> |
|
|
<i class="fas fa-bars text-xl"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<section class="relative pt-32 pb-20 overflow-hidden"> |
|
|
<div class="container mx-auto px-6 relative z-10"> |
|
|
<div class="flex flex-col lg:flex-row items-center"> |
|
|
<div class="lg:w-1/2 mb-12 lg:mb-0"> |
|
|
<h1 class="text-4xl md:text-5xl font-bold text-gray-800 leading-tight mb-6"> |
|
|
Apprenez de manière <span class="text-gradient">durable</span> et efficace |
|
|
</h1> |
|
|
<p class="text-lg text-gray-600 mb-8 max-w-lg"> |
|
|
Découvrez notre plateforme éco-responsable pour développer vos compétences avec des experts engagés. |
|
|
</p> |
|
|
<div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> |
|
|
<button class="px-8 py-4 rounded-full gradient-bg text-white font-bold hover:bg-green-500 transition-all transform hover:-translate-y-1 shadow-lg hover:shadow-xl flex items-center justify-center"> |
|
|
<span>Explorer les cours</span> |
|
|
<i class="fas fa-arrow-right ml-3"></i> |
|
|
</button> |
|
|
<button class="px-8 py-4 rounded-full bg-white text-green-600 font-bold border border-gray-200 hover:bg-gray-50 transition-all transform hover:-translate-y-1 shadow-lg flex items-center justify-center"> |
|
|
<i class="fas fa-play-circle mr-3 text-lg"></i> |
|
|
<span>Voir la démo</span> |
|
|
</button> |
|
|
</div> |
|
|
<div class="flex mt-10 space-x-6"> |
|
|
<div class="flex -space-x-2"> |
|
|
<img src="https://randomuser.me/api/portraits/women/12.jpg" class="w-10 h-10 rounded-full border-2 border-white" alt="Student"> |
|
|
<img src="https://randomuser.me/api/portraits/men/32.jpg" class="w-10 h-10 rounded-full border-2 border-white" alt="Student"> |
|
|
<img src="https://randomuser.me/api/portraits/women/45.jpg" class="w-10 h-10 rounded-full border-2 border-white" alt="Student"> |
|
|
<img src="https://randomuser.me/api/portraits/men/55.jpg" class="w-10 h-10 rounded-full border-2 border-white" alt="Student"> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-star text-yellow-400 mr-1"></i> |
|
|
<span class="font-bold text-gray-800">4.8/5.0</span> |
|
|
</div> |
|
|
<p class="text-sm text-gray-600 ml-2">Par plus de 8,000 étudiants</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="lg:w-1/2"> |
|
|
<div class="relative"> |
|
|
<div class="w-full h-full bg-green-100 rounded-3xl overflow-hidden shadow-2xl border-4 border-white"> |
|
|
<img src="https://images.unsplash.com/photo-1546410531-bb4caa6b424d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1471&q=80" class="w-full h-full object-cover" alt="Étudiants en apprentissage"> |
|
|
</div> |
|
|
<div class="absolute -bottom-6 -left-6 w-40 h-40 gradient-bg rounded-2xl shadow-xl flex flex-col items-center justify-center p-4 text-white"> |
|
|
<div class="text-3xl font-bold">950+</div> |
|
|
<div class="text-sm text-center">Cours verts</div> |
|
|
<div class="absolute -top-3 -right-3 w-12 h-12 bg-yellow-400 rounded-full flex items-center justify-center shadow-lg"> |
|
|
<i class="fas fa-seedling text-white"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-20 bg-white"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<div class="text-center mb-16"> |
|
|
<span class="inline-block px-4 py-1 rounded-full gradient-bg text-white text-sm font-medium mb-4">NOTRE APPROCHE</span> |
|
|
<h2 class="text-3xl md:text-4xl font-bold text-gray-800 mt-2">Éducation <span class="text-gradient">durable</span></h2> |
|
|
<p class="text-gray-600 max-w-2xl mx-auto mt-4">Nous combinons apprentissage de qualité et engagement écologique pour un impact positif.</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="bg-white rounded-2xl p-8 border border-gray-100 hover:border-green-300 transition-all shadow-sm hover:shadow-md"> |
|
|
<div class="w-16 h-16 gradient-bg rounded-xl flex items-center justify-center text-white text-2xl mb-6"> |
|
|
<i class="fas fa-globe-europe"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-gray-800 mb-3">Contenu éco-responsable</h3> |
|
|
<p class="text-gray-600">Nos cours sont conçus avec une approche durable et des thématiques environnementales intégrées.</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-2xl p-8 border border-gray-100 hover:border-green-300 transition-all shadow-sm hover:shadow-md"> |
|
|
<div class="w-16 h-16 gradient-bg rounded-xl flex items-center justify-center text-white text-2xl mb-6"> |
|
|
<i class="fas fa-chart-line"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-gray-800 mb-3">Pédagogie innovante</h3> |
|
|
<p class="text-gray-600">Méthodes d'apprentissage actives basées sur des cas concrets de développement durable.</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-2xl p-8 border border-gray-100 hover:border-green-300 transition-all shadow-sm hover:shadow-md"> |
|
|
<div class="w-16 h-16 gradient-bg rounded-xl flex items-center justify-center text-white text-2xl mb-6"> |
|
|
<i class="fas fa-hand-holding-heart"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-gray-800 mb-3">Impact positif</h3> |
|
|
<p class="text-gray-600">Une partie de nos revenus est reversée à des projets environnementaux certifiés.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="courses" class="py-20 bg-gray-50"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<div class="text-center mb-16"> |
|
|
<span class="inline-block px-4 py-1 rounded-full gradient-bg text-white text-sm font-medium mb-4">NOS COURS</span> |
|
|
<h2 class="text-3xl md:text-4xl font-bold text-gray-800 mt-2">Formations <span class="text-gradient">vertes</span> populaires</h2> |
|
|
<p class="text-gray-600 max-w-2xl mx-auto mt-4">Découvrez nos cours les plus suivis sur les thématiques du développement durable.</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="course-card bg-white rounded-2xl overflow-hidden"> |
|
|
<div class="relative"> |
|
|
<img src="https://images.unsplash.com/photo-1467232004584-a241de8b3885?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1469&q=80" alt="Énergies renouvelables" class="w-full h-48 object-cover"> |
|
|
<div class="absolute top-4 right-4 bg-green-600 text-white text-xs px-3 py-1 rounded-full shadow-lg">NOUVEAU</div> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<div class="flex justify-between items-start mb-3"> |
|
|
<h3 class="text-xl font-bold text-gray-800">Énergies Renouvelables</h3> |
|
|
<span class="bg-green-100 text-green-800 text-xs font-medium px-2.5 py-0.5 rounded-full flex items-center shadow"> |
|
|
<i class="fas fa-star mr-1 text-xs"></i> 4.7 |
|
|
</span> |
|
|
</div> |
|
|
<p class="text-gray-600 mb-4">Comprendre et mettre en œuvre les solutions énergétiques durables.</p> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div class="flex items-center"> |
|
|
<img src="https://randomuser.me/api/portraits/men/42.jpg" class="w-8 h-8 rounded-full mr-2 border-2 border-white shadow" alt="Formateur"> |
|
|
<span class="text-sm text-gray-600">Pierre Lemaire</span> |
|
|
</div> |
|
|
<div class="text-right"> |
|
|
<span class="text-green-600 font-bold text-lg">€59.99</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="px-6 pb-6"> |
|
|
<button class="w-full gradient-bg hover:bg-green-500 text-white px-6 py-3 rounded-lg font-medium transition-all shadow-md hover:shadow-lg"> |
|
|
<i class="fas fa-cart-plus mr-2"></i> S'inscrire |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="course-card bg-white rounded-2xl overflow-hidden"> |
|
|
<div class="relative"> |
|
|
<img src="https://images.unsplash.com/photo-1427751840561-9852520f8ce8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1476&q=80" alt="Agriculture durable" class="w-full h-48 object-cover"> |
|
|
<div class="absolute top-4 right-4 bg-yellow-500 text-white text-xs px-3 py-1 rounded-full shadow-lg">POPULAIRE</div> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<div class="flex justify-between items-start mb-3"> |
|
|
<h3 class="text-xl font-bold text-gray-800">Agriculture Durable</h3> |
|
|
<span class="bg-green-100 text-green-800 text-xs font-medium px-2.5 py-0.5 rounded-full flex items-center shadow"> |
|
|
<i class="fas fa-star mr-1 text-xs"></i> 4.9 |
|
|
</span> |
|
|
</div> |
|
|
<p class="text-gray-600 mb-4">Techniques modernes pour une production agricole respectueuse de l'environnement.</p> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div class="flex items-center"> |
|
|
<img src="https://randomuser.me/api/portraits/women/53.jpg" class="w-8 h-8 rounded-full mr-2 border-2 border-white shadow" alt="Formatrice"> |
|
|
<span class="text-sm text-gray-600">Sophie Rousseau</span> |
|
|
</div> |
|
|
<div class="text-right"> |
|
|
<span class="text-green-600 font-bold text-lg">€69.99</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="px-6 pb-6"> |
|
|
<button class="w-full gradient-bg hover:bg-green-500 text-white px-6 py-3 rounded-lg font-medium transition-all shadow-md hover:shadow-lg"> |
|
|
<i class="fas fa-cart-plus mr-2"></i> S'inscrire |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="course-card bg-white rounded-2xl overflow-hidden"> |
|
|
<div class="relative"> |
|
|
<img src="https://images.unsplash.com/photo-1508514177221-188e1dfe62b9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1471&q=80" alt="Économie circulaire" class="w-full h-48 object-cover"> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<div class="flex justify-between items-start mb-3"> |
|
|
<h3 class="text-xl font-bold text-gray-800">Économie Circulaire</h3> |
|
|
<span class="bg-green-100 text-green-800 text-xs font-medium px-2.5 py-0.5 rounded-full flex items-center shadow"> |
|
|
<i class="fas fa-star mr-1 text-xs"></i> 4.6 |
|
|
</span> |
|
|
</div> |
|
|
<p class="text-gray-600 mb-4">Modèles économiques innovants pour réduire l'impact environnemental.</p> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div class="flex items-center"> |
|
|
<img src="https://randomuser.me/api/portraits/men/64.jpg" class="w-8 h-8 rounded-full mr-2 border-2 border-white shadow" alt="Formateur"> |
|
|
<span class="text-sm text-gray-600">Thomas Moreau</span> |
|
|
</div> |
|
|
<div class="text-right"> |
|
|
<span class="text-green-600 font-bold text-lg">€49.99</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="px-6 pb-6"> |
|
|
<button class="w-full gradient-bg hover:bg-green-500 text-white px-6 py-3 rounded-lg font-medium transition-all shadow-md hover:shadow-lg"> |
|
|
<i class="fas fa-cart-plus mr-2"></i> S'inscrire |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="text-center mt-12"> |
|
|
<a href="#courses" class="inline-block border-2 border-green-600 hover:bg-green-600 hover:text-white text-green-600 font-bold py-3 px-8 rounded-lg transition-all duration-300 hover:-translate-y-1 shadow-lg hover:shadow-xl"> |
|
|
<span>Voir tous les cours</span> <i class="fas fa-arrow-right ml-2"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-20 gradient-bg-dark text-white"> |
|
|
<div class="container mx-auto px-6 text-center"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold mb-6">Prêt à faire la différence ?</h2> |
|
|
<p class="text-xl mb-8 max-w-2xl mx-auto">Rejoignez notre communauté d'apprenants engagés pour un avenir plus durable.</p> |
|
|
<div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4"> |
|
|
<button class="px-8 py-4 bg-white text-green-600 font-bold rounded-full hover:bg-gray-100 transition-all transform hover:-translate-y-1 shadow-lg"> |
|
|
Commencer maintenant |
|
|
</button> |
|
|
<button class="px-8 py-4 border-2 border-white text-white font-bold rounded-full hover:bg-white/10 transition-all transform hover:-translate-y-1 shadow-lg"> |
|
|
<i class="fas fa-envelope mr-2"></i> Nous contacter |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<footer class="bg-gray-900 text-gray-400 py-12"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-8"> |
|
|
<div> |
|
|
<div class="flex items-center space-x-2 mb-6"> |
|
|
<div class="w-10 h-10 rounded-full gradient-bg flex items-center justify-center text-white"> |
|
|
<i class="fas fa-leaf text-xl"></i> |
|
|
</div> |
|
|
<span class="text-xl font-bold text-white">Eco<span class="text-gradient">Learn</span></span> |
|
|
</div> |
|
|
<p class="mb-4">L'éducation au service de la planète.</p> |
|
|
<div class="flex space-x-4"> |
|
|
<a href="#" class="w-10 h-10 rounded-full bg-gray-800 hover:bg-green-600 flex items-center justify-center text-white transition-all"> |
|
|
<i class="fab fa-facebook-f"></i> |
|
|
</a> |
|
|
<a href="#" class="w-10 h-10 rounded-full bg-gray-800 hover:bg-green-600 flex items-center justify-center text-white transition-all"> |
|
|
<i class="fab fa-twitter"></i> |
|
|
</a> |
|
|
<a href="#" class="w-10 h-10 rounded-full bg-gray-800 hover:bg-green-600 flex items-center justify-center text-white transition-all"> |
|
|
<i class="fab fa-linkedin-in"></i> |
|
|
</a> |
|
|
<a href="#" class="w-10 h-10 rounded-full bg-gray-800 hover:bg-green-600 flex items-center justify-center text-white transition-all"> |
|
|
<i class="fab fa-instagram"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h3 class="text-white text-lg font-bold mb-6">Navigation</h3> |
|
|
<ul class="space-y-3"> |
|
|
<li><a href="#" class="hover:text-green-400 transition-colors">Accueil</a></li> |
|
|
<li><a href="#courses" class="hover:text-green-400 transition-colors">Cours</a></li> |
|
|
<li><a href="#" class="hover:text-green-400 transition-colors">Formateurs</a></li> |
|
|
<li><a href="#" class="hover:text-green-400 transition-colors">À propos</a></li> |
|
|
<li><a href="#" class="hover:text-green-400 transition-colors">Contact</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h3 class="text-white text-lg font-bold mb-6">Catégories</h3> |
|
|
<ul class="space-y-3"> |
|
|
<li><a href="#" class="hover:text-green-400 transition-colors">Environnement</a></li> |
|
|
<li><a href="#" class="hover:text-green-400 transition-colors">Énergie</a></li> |
|
|
<li><a href="#" class="hover:text-green-400 transition-colors">Agriculture</a></li> |
|
|
<li><a href="#" class="hover:text-green-400 transition-colors">Économie</a></li> |
|
|
<li><a href="#" class="hover:text-green-400 transition-colors">Technologie</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h3 class="text-white text-lg font-bold mb-6">Contact</h3> |
|
|
<ul class="space-y-3"> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-map-marker-alt mt-1 mr-3 text-green-400"></i> |
|
|
<span>123 Rue Verte, Paris 75000</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-phone-alt mr-3 text-green-400"></i> |
|
|
<span>+33 1 23 45 67 89</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-envelope mr-3 text-green-400"></i> |
|
|
<span>contact@ecolearn.com</span> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center"> |
|
|
<p>© 2023 EcoLearn. Tous droits réservés.</p> |
|
|
<div class="flex space-x-6 mt-4 md:mt-0"> |
|
|
<a href="#" class="hover:text-green-400 transition-colors">Confidentialité</a> |
|
|
<a href="#" class="hover:text-green-400 transition-colors">Conditions</a> |
|
|
<a href="#" class="hover:text-green-400 transition-colors">Cookies</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
|
|
|
const blobs = document.querySelectorAll('.blob'); |
|
|
blobs.forEach((blob, index) => { |
|
|
blob.style.animationDelay = `${index * 2}s`; |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
|
|
anchor.addEventListener('click', function(e) { |
|
|
e.preventDefault(); |
|
|
|
|
|
document.querySelector(this.getAttribute('href')).scrollIntoView({ |
|
|
behavior: 'smooth' |
|
|
}); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
const courseCards = document.querySelectorAll('.course-card'); |
|
|
courseCards.forEach(card => { |
|
|
card.addEventListener('mouseenter', function() { |
|
|
this.style.transform = 'translateY(-5px)'; |
|
|
this.style.boxShadow = '0 10px 25px -5px rgba(16, 185, 129, 0.2)'; |
|
|
}); |
|
|
|
|
|
card.addEventListener('mouseleave', function() { |
|
|
this.style.transform = ''; |
|
|
this.style.boxShadow = ''; |
|
|
}); |
|
|
}); |
|
|
</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=docto41/lea" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
