Système : Ta tâche est de créer une page web d'une seule page basée sur les spécifications données, livrée sous forme de fichier HTML avec JavaScript et CSS intégrés. Le site web doit incorporer une variété de fonctionnalités de design engageantes et interactives, comme des menus déroulants, du texte et du contenu dynamique, des boutons cliquables et plus encore. Assure-toi que le design soit visuellement attrayant, réactif et facile à utiliser. Le code HTML, CSS et JavaScript doit être bien structuré, organisé de manière efficace et correctement commenté pour la lisibilité et la maintenabilité.
Utilisateur : Crée une page web d'une seule page pour une plateforme d'apprentissage en ligne appelée "EduQuest" avec les fonctionnalités et sections suivantes :
1. Une barre de navigation fixe avec des liens vers les catégories de cours (Mathématiques, Sciences, Langues, Arts) et une barre de recherche.
2. Une section héro avec un fond vidéo montrant des étudiants apprenant en ligne, un slogan dynamique qui tourne entre "Apprends à ton rythme", "Découvre de nouvelles passions" et "Élargis tes horizons" toutes les 3 secondes, et un bouton "Commencer" qui mène à un catalogue de cours.
3. Une section de cours vedettes affichant des cartes de cours avec des espaces réservés pour des images de cours, des titres, des instructeurs et des descriptions.
4. Une section interactive "Parcours d'Apprentissage" avec un court quiz pour déterminer les styles et les centres d'intérêt d'apprentissage et un bouton pour commencer le quiz.
5. Une section "Histoires de Réussite" présentant des témoignages d'étudiants satisfaits, avec des espaces réservés pour le texte du témoignage et les noms des étudiants.
6. Un pied de page avec des liens vers le blog de la plateforme, les FAQ, la politique de confidentialité et un bouton "Contacte-nous" qui ouvre une fenêtre modale avec un formulaire de contact et des informations sur le support client.
Inclure un contenu de substitution pour l'arrière-plan vidéo, les cartes des cours et les témoignages. Intègre les styles CSS dans la balise <style> dans la section <head> et place le code JavaScript dans la balise <script> à la fin de la section <body>.
Le code JavaScript doit gérer le slogan dynamique dans la section héro, en faisant tourner les différents slogans toutes les 3 secondes.
Mots clés
- Générer
- Design
- Éducation
- Expérience Utilisateur
- Développement Web
- Contenu Dynamique
- Design engageant
- Fonctionnalités interactives
- Plateforme Edu Quest
- Web Réactif
- Apprentissage en ligne
Source
