Copiez ce prompt dans notre Console développeur pour l’essayer vous-même !

Contenu
SystemVotre 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é.
UserCré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

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>EduQuest - Plateforme d'apprentissage en ligne</title>
    <style>
        /* Styles CSS */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }

        header {
            background-color: #333;
            color: #fff;
            padding: 20px;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 999;
        }

        nav ul {
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: space-between;
        }

        nav ul li a {
            color: #fff;
            text-decoration: none;
            padding: 10px;
        }

        .hero {
            height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            position: relative;
            overflow: hidden;
        }

        .hero video {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: -1;
        }

        .hero h1 {
            font-size: 48px;
            margin-bottom: 20px;
        }

        .hero p {
            font-size: 24px;
            margin-bottom: 40px;
        }

        .hero button {
            padding: 10px 20px;
            font-size: 18px;
            background-color: #333;
            color: #fff;
            border: none;
            cursor: pointer;
        }

        .featured-courses, .success-stories {
            padding: 40px;
        }

        .course-card {
            background-color: #f5f5f5;
            padding: 20px;
            margin-bottom: 20px;
        }

        .testimonial {
            background-color: #f5f5f5;
            padding: 20px;
            margin-bottom: 20px;
        }

        footer {
            background-color: #333;
            color: #fff;
            padding: 20px;
            text-align: center;
        }

        footer a {
            color: #fff;
            text-decoration: none;
            margin: 0 10px;
        }

        footer button {
            padding: 10px 20px;
            font-size: 18px;
            background-color: #fff;
            color: #333;
            border: none;
            cursor: pointer;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <header>
        <nav>
            <ul>
                <li><a href="#">Mathématiques</a></li>
                <li><a href="#">Sciences</a></li>
                <li><a href="#">Langues</a></li>
                <li><a href="#">Arts</a></li>
                <li><input type="text" placeholder="Rechercher"></li>
            </ul>
        </nav>
    </header>

    <section class="hero">
        <video src="placeholder-video.mp4" autoplay loop muted></video>
        <h1>Bienvenue sur EduQuest</h1>
        <p id="tagline">Apprenez à votre rythme</p>
        <button>Commencer</button>
    </section>

    <section class="featured-courses">
        <h2>Cours en vedette</h2>
        <div class="course-card">
            <img src="placeholder-course-image.jpg" alt="Image du cours">
            <h3>Titre du cours</h3>
            <p>Instructeur : Jean Dupont</p>
            <p>Description du cours ici.</p>
        </div>
        <div class="course-card">
            <img src="placeholder-course-image.jpg" alt="Image du cours">
            <h3>Titre du cours</h3>
            <p>Instructeur : Marie Martin</p>
            <p>Description du cours ici.</p>
        </div>
    </section>

    <section class="success-stories">
        <h2>Histoires de réussite</h2>
        <div class="testimonial">
            <p>"EduQuest m'a aidé à acquérir une nouvelle compétence et à faire progresser ma carrière. Je recommande vivement !"</p>
            <p>- Jean Dupont</p>
        </div>
        <div class="testimonial">
            <p>"Je ne pensais pas pouvoir apprendre une nouvelle langue en ligne, mais EduQuest l'a rendu possible. Merci !"</p>
            <p>- Marie Martin</p>
        </div>
    </section>

    <footer>
        <a href="#">Blog</a>
        <a href="#">FAQ</a>
        <a href="#">Politique de confidentialité</a>
        <button>Contactez-nous</button>
    </footer>

    <script>
        // Code JavaScript
        const taglines = [
            "Apprenez à votre rythme",
            "Découvrez de nouvelles passions",
            "Élargissez vos horizons"
        ];

        let index = 0;
        const taglineElement = document.getElementById("tagline");

        function rotateTagline() {
            taglineElement.textContent = taglines[index];
            index = (index + 1) % taglines.length;
        }

        setInterval(rotateTagline, 3000);
    </script>
</body>
</html>

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

import anthropic

client = anthropic.Anthropic( # par défaut utilise os.environ.get("ANTHROPIC_API_KEY")
api_key="ma_clé_api",
)
message = client.messages.create(
  model="claude-3-5-sonnet-20241022",
  max_tokens=4000,
  temperature=0,
  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é.",
  messages=[
    {
      "role": "user", 
      "content": [
        {
          "type": "text",
          "text": "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 : \n \n1. Une barre de navigation fixe avec des liens vers les catégories de cours (Mathématiques, Sciences, Langues, Arts) et une barre de recherche. \n \n2. 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. \n \n3. 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. \n \n4. 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. \n \n5. 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. \n \n6. 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. \n \nIncluez 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>`. \n \nLe code JavaScript doit gérer le slogan dynamique dans la section héros, alternant entre les différents slogans toutes les 3 secondes."
        }
      ]
    }
  ]
)
print(message.content)

Was this page helpful?

Clairvoyant d'entrepriseExpert en formules Excel