|
|
<!DOCTYPE html> |
|
|
<html lang="fr"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>À la découverte de l'IA avec MohPython</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script src="https://unpkg.com/feather-icons"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
|
|
<style> |
|
|
.hero-gradient { |
|
|
background: linear-gradient(135deg, #6e48aa 0%, #9d50bb 100%); |
|
|
} |
|
|
.part-card: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); |
|
|
} |
|
|
.floating { |
|
|
animation: floating 3s ease-in-out infinite; |
|
|
} |
|
|
@keyframes floating { |
|
|
0% { transform: translateY(0px); } |
|
|
50% { transform: translateY(-15px); } |
|
|
100% { transform: translateY(0px); } |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50 font-sans"> |
|
|
|
|
|
<nav class="bg-white shadow-md"> |
|
|
<div class="max-w-6xl mx-auto px-4"> |
|
|
<div class="flex justify-between h-16"> |
|
|
<div class="flex items-center"> |
|
|
<span class="text-xl font-bold text-purple-700">MohPython</span> |
|
|
</div> |
|
|
<div class="hidden md:flex items-center space-x-8"> |
|
|
<a href="#part1" class="text-gray-700 hover:text-purple-600">Partie 1</a> |
|
|
<a href="#part2" class="text-gray-700 hover:text-purple-600">Partie 2</a> |
|
|
<a href="#part3" class="text-gray-700 hover:text-purple-600">Partie 3</a> |
|
|
<a href="#quiz" class="text-gray-700 hover:text-purple-600">Quiz</a> |
|
|
</div> |
|
|
<div class="md:hidden flex items-center"> |
|
|
<button class="mobile-menu-button"> |
|
|
<i data-feather="menu"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<section class="hero-gradient text-white py-20"> |
|
|
<div class="max-w-6xl mx-auto px-4 flex flex-col md:flex-row items-center"> |
|
|
<div class="md:w-1/2 mb-10 md:mb-0"> |
|
|
<h1 class="text-4xl md:text-5xl font-bold mb-4">À la découverte de l'IA</h1> |
|
|
<p class="text-xl mb-8">Un voyage interactif dans le monde fascinant de l'intelligence artificielle pour les étudiants de première année.</p> |
|
|
<button class="bg-white text-purple-700 px-6 py-3 rounded-full font-semibold hover:bg-purple-100 transition duration-300">Commencer l'aventure</button> |
|
|
</div> |
|
|
<div class="md:w-1/2 flex justify-center"> |
|
|
<img src="http://static.photos/technology/640x360/42" alt="IA Illustration" class="rounded-lg shadow-xl floating"> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="parts" class="py-16 bg-white"> |
|
|
<div class="max-w-6xl mx-auto px-4"> |
|
|
<h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Explorez le programme</h2> |
|
|
|
|
|
<div class="grid md:grid-cols-3 gap-8"> |
|
|
|
|
|
<div id="part1" class="bg-purple-50 rounded-xl p-6 shadow-md transition duration-300 part-card"> |
|
|
<div class="bg-purple-100 w-16 h-16 rounded-full flex items-center justify-center mb-4"> |
|
|
<span class="text-purple-700 font-bold text-2xl">1</span> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-3 text-purple-800">Découverte de l'IA</h3> |
|
|
<ul class="space-y-2 text-gray-700"> |
|
|
<li class="flex items-start"> |
|
|
<i data-feather="check-circle" class="text-purple-500 mr-2 mt-1"></i> |
|
|
<span>Qu'est-ce que l'IA?</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i data-feather="check-circle" class="text-purple-500 mr-2 mt-1"></i> |
|
|
<span>Applications quotidiennes</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i data-feather="check-circle" class="text-purple-500 mr-2 mt-1"></i> |
|
|
<span>Démythifier l'IA</span> |
|
|
</li> |
|
|
</ul> |
|
|
<button class="mt-4 text-purple-700 font-semibold flex items-center"> |
|
|
Explorer <i data-feather="arrow-right" class="ml-2"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="part2" class="bg-blue-50 rounded-xl p-6 shadow-md transition duration-300 part-card"> |
|
|
<div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mb-4"> |
|
|
<span class="text-blue-700 font-bold text-2xl">2</span> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-3 text-blue-800">Opportunités & Défis</h3> |
|
|
<ul class="space-y-2 text-gray-700"> |
|
|
<li class="flex items-start"> |
|
|
<i data-feather="check-circle" class="text-blue-500 mr-2 mt-1"></i> |
|
|
<span>Opportunités de l'IA</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i data-feather="check-circle" class="text-blue-500 mr-2 mt-1"></i> |
|
|
<span>Enjeux de sûreté</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i data-feather="check-circle" class="text-blue-500 mr-2 mt-1"></i> |
|
|
<span>Impact sur le travail</span> |
|
|
</li> |
|
|
</ul> |
|
|
<button class="mt-4 text-blue-700 font-semibold flex items-center"> |
|
|
Explorer <i data-feather="arrow-right" class="ml-2"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="part3" class="bg-green-50 rounded-xl p-6 shadow-md transition duration-300 part-card"> |
|
|
<div class="bg-green-100 w-16 h-16 rounded-full flex items-center justify-center mb-4"> |
|
|
<span class="text-green-700 font-bold text-2xl">3</span> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-3 text-green-800">Projet d'IA</h3> |
|
|
<ul class="space-y-2 text-gray-700"> |
|
|
<li class="flex items-start"> |
|
|
<i data-feather="check-circle" class="text-green-500 mr-2 mt-1"></i> |
|
|
<span>Étapes d'un projet</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i data-feather="check-circle" class="text-green-500 mr-2 mt-1"></i> |
|
|
<span>Machine Learning</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i data-feather="check-circle" class="text-green-500 mr-2 mt-1"></i> |
|
|
<span>Deep Learning</span> |
|
|
</li> |
|
|
</ul> |
|
|
<button class="mt-4 text-green-700 font-semibold flex items-center"> |
|
|
Explorer <i data-feather="arrow-right" class="ml-2"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 bg-gray-100"> |
|
|
<div class="max-w-6xl mx-auto px-4"> |
|
|
<h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Ce que disent les étudiants</h2> |
|
|
<div class="grid md:grid-cols-2 gap-8"> |
|
|
<div class="bg-white p-6 rounded-xl shadow"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<img src="http://static.photos/people/200x200/1" alt="Étudiant" class="w-12 h-12 rounded-full mr-4"> |
|
|
<div> |
|
|
<h4 class="font-bold">Alexandre</h4> |
|
|
<p class="text-gray-600">Étudiant en Informatique</p> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-gray-700">"Ce cours m'a ouvert les yeux sur les possibilités infinies de l'IA. Les explications sont claires et les exemples concrets."</p> |
|
|
</div> |
|
|
<div class="bg-white p-6 rounded-xl shadow"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<img src="http://static.photos/people/200x200/2" alt="Étudiante" class="w-12 h-12 rounded-full mr-4"> |
|
|
<div> |
|
|
<h4 class="font-bold">Sophie</h4> |
|
|
<p class="text-gray-600">Étudiante en Mathématiques</p> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-gray-700">"J'avais peur de l'IA avant ce cours. Maintenant, je comprends mieux ses limites et ses forces. Les quiz sont vraiment utiles!"</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 bg-purple-700 text-white"> |
|
|
<div class="max-w-6xl mx-auto px-4 text-center"> |
|
|
<h2 class="text-3xl font-bold mb-6">Prêt à plonger dans le monde de l'IA?</h2> |
|
|
<p class="text-xl mb-8 max-w-2xl mx-auto">Rejoignez des centaines d'étudiants qui ont déjà commencé leur voyage avec MohPython.</p> |
|
|
<button class="bg-white text-purple-700 px-8 py-4 rounded-full font-bold text-lg hover:bg-purple-100 transition duration-300 shadow-lg"> |
|
|
S'inscrire maintenant <i data-feather="arrow-right" class="ml-2 inline"></i> |
|
|
</button> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<footer class="bg-gray-900 text-white py-12"> |
|
|
<div class="max-w-6xl mx-auto px-4"> |
|
|
<div class="grid md:grid-cols-4 gap-8"> |
|
|
<div> |
|
|
<h3 class="text-xl font-bold mb-4">MohPython</h3> |
|
|
<p class="text-gray-400">Rendre l'IA accessible à tous, un étudiant à la fois.</p> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold mb-4">Navigation</h4> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Accueil</a></li> |
|
|
<li><a href="#part1" class="text-gray-400 hover:text-white">Partie 1</a></li> |
|
|
<li><a href="#part2" class="text-gray-400 hover:text-white">Partie 2</a></li> |
|
|
<li><a href="#part3" class="text-gray-400 hover:text-white">Partie 3</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold mb-4">Ressources</h4> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Quiz</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Exercices</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Bibliographie</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold mb-4">Contact</h4> |
|
|
<div class="flex space-x-4"> |
|
|
<a href="#" class="text-gray-400 hover:text-white"><i data-feather="mail"></i></a> |
|
|
<a href="#" class="text-gray-400 hover:text-white"><i data-feather="twitter"></i></a> |
|
|
<a href="#" class="text-gray-400 hover:text-white"><i data-feather="linkedin"></i></a> |
|
|
<a href="#" class="text-gray-400 hover:text-white"><i data-feather="github"></i></a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400"> |
|
|
<p>© 2023 MohPython. Tous droits réservés.</p> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
feather.replace(); |
|
|
|
|
|
|
|
|
const mobileMenuButton = document.querySelector('.mobile-menu-button'); |
|
|
mobileMenuButton.addEventListener('click', () => { |
|
|
|
|
|
alert("Menu mobile sera implémenté ici!"); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
|
|
anchor.addEventListener('click', function (e) { |
|
|
e.preventDefault(); |
|
|
document.querySelector(this.getAttribute('href')).scrollIntoView({ |
|
|
behavior: 'smooth' |
|
|
}); |
|
|
}); |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
