Assistant de création de site web
Créez des sites web d’une page selon les spécifications de l’utilisateur.
Copiez ce prompt dans notre Console développeur pour l’essayer vous-même !
Contenu | |
---|---|
System | Votre tâche est de créer un site web d’une page selon les spécifications données, livré 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 interactives et attrayantes, comme des menus déroulants, du texte et du contenu dynamique, des boutons cliquables, et plus encore. Assurez-vous que le design soit visuellement attrayant, réactif et convivial. Le code HTML, CSS et JavaScript doit être bien structuré, efficacement organisé et correctement commenté pour la lisibilité et la maintenabilité. |
User | Créez un site web d’une 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éros avec une vidéo en arrière-plan montrant des étudiants apprenant en ligne, un slogan dynamique qui alterne entre “Apprenez à votre rythme”, “Découvrez de nouvelles passions” et “Élargissez vos horizons” toutes les 3 secondes, et un bouton “Commencer” menant à un catalogue de cours. 3. Une section de cours en vedette affichant des cartes de cours avec des espaces réservés pour les images de cours, les titres, les instructeurs et les descriptions. 4. Une section “Parcours d’apprentissage” interactive avec un court questionnaire pour déterminer les styles d’apprentissage et les intérêts, et un bouton pour commencer le questionnaire. 5. Une section “Histoires de réussite” présentant des témoignages d’étudiants satisfaits, avec des espaces réservés pour le texte des témoignages et les noms des étudiants. 6. Un pied de page avec des liens vers le blog de la plateforme, la FAQ, la politique de confidentialité et un bouton “Contactez-nous” qui ouvre une fenêtre modale avec un formulaire de contact et des informations de support client. Incluez du contenu de remplissage pour la vidéo d’arrière-plan, les cartes de cours et les témoignages. Intégrez les styles CSS dans la balise <style> dans la section <head> et placez 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éros, alternant entre les différents slogans toutes les 3 secondes. |
Exemple de sortie
Ce code crée un site web d’une page pour “EduQuest” avec les fonctionnalités et sections suivantes :
Une barre de navigation fixe avec des liens vers les catégories de cours (Mathématiques, Sciences, Langues, Arts) et une barre de recherche.
Une section héros avec une vidéo d’arrière-plan placeholder, un slogan dynamique qui alterne entre “Apprenez à votre rythme”, “Découvrez de nouvelles passions” et “Élargissez vos horizons” toutes les 3 secondes, et un bouton “Commencer”.
Une section de cours en vedette affichant des cartes de cours avec des espaces réservés pour les images de cours, les titres, les instructeurs et les descriptions.
Une section “Histoires de réussite” présentant des témoignages d’étudiants satisfaits, avec des espaces réservés pour le texte des témoignages et les noms des étudiants.
Un pied de page avec des liens vers le blog de la plateforme, la FAQ, la politique de confidentialité et un bouton “Contactez-nous”.
Les styles CSS sont intégrés dans la balise
<style>
dans la section<head>
, et le code JavaScript est placé dans la balise<script>
à la fin de la section<body>
.Le code JavaScript gère le slogan dynamique dans la section héros, alternant entre les différents slogans toutes les 3 secondes en utilisant la fonction setInterval.
Veuillez noter que la vidéo d’arrière-plan, les images de cours et les témoignages sont des placeholders et doivent être remplacés par du contenu réel.
Requête API
Was this page helpful?