Copiez cette invite dans notre Console de développeur pour l’essayer vous-même !

Contenu
SystemVotre tâche est de créer un site web d’une page basé sur les spécifications données, livré sous forme de fichier HTML avec du JavaScript et du CSS intégrés. Le site web devrait incorporer une variété de fonctionnalités de conception engageantes et interactives, telles que des menus déroulants, du texte et du contenu dynamiques, des boutons cliquables, et plus encore. Assurez-vous que la conception est visuellement attrayante, réactive et conviviale. Le code HTML, CSS et JavaScript doit être bien structuré, efficacement organisé et correctement commenté pour une lisibilité et une 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 un arrière-plan vidéo 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, les titres, les instructeurs et les descriptions des cours.
4. Une section interactive “Parcours d’apprentissage” avec un court quiz pour déterminer les styles et les intérêts 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 des témoignages et les noms des étudiants.
6. Un pied de page avec des liens vers le blog, la FAQ, la politique de confidentialité de la plateforme et un bouton “Nous contacter” qui ouvre une fenêtre modale avec un formulaire de contact et des informations sur le support client.

Incluez du contenu de remplissage pour l’arrière-plan vidéo, 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 devrait gérer le slogan dynamique dans la section héros, en faisant défiler 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 : John Doe</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 : Jane Smith</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é à apprendre une nouvelle compétence et à faire progresser ma carrière. Hautement recommandé !"</p>
            <p>- John Doe</p>
        </div>
        <div class="testimonial">
            <p>"Je n'aurais jamais pensé pouvoir apprendre une nouvelle langue en ligne, mais EduQuest l'a rendu possible. Merci !"</p>
            <p>- Jane Smith</p>
        </div>
    </section>

    <footer>
        <a href="#">Blog</a>
        <a href="#">FAQ</a>
        <a href="#">Politique de confidentialité</a>
        <button>Nous contacter</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 un arrière-plan vidéo de remplissage, 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, les titres, les instructeurs et les descriptions des cours.

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, la FAQ, la politique de confidentialité de la plateforme et un bouton “Nous contacter”.

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, en faisant défiler les différents slogans toutes les 3 secondes à l’aide de la fonction setInterval.

Veuillez noter que l’arrière-plan vidéo, les images des cours et les témoignages sont des espaces réservés et doivent être remplacés par du contenu réel.

​
Requête API

Note : Claude 3 Opus sera bientôt disponible sur l’API Bedrock.

import anthropic

client = anthropic.Anthropic( # defaults to os.environ.get("ANTHROPIC_API_KEY")
api_key="my_api_key",
)
message = client.messages.create(
  model="claude-3-opus-20240229",
  max_tokens=4000,
  temperature=0,
  system="Votre tâche est de créer un site web d'une page basé sur les spécifications données, livré sous forme de fichier HTML avec du JavaScript et du CSS intégrés. Le site web devrait incorporer une variété de fonctionnalités de conception engageantes et interactives, telles que des menus déroulants, du texte et du contenu dynamiques, des boutons cliquables, et plus encore. Assurez-vous que la conception est visuellement attrayante, réactive et conviviale. Le code HTML, CSS et JavaScript doit être bien structuré, efficacement organisé et correctement commenté pour une lisibilité et une 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 un arrière-plan vidéo 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, les titres, les instructeurs et les descriptions des cours. \n \n4. Une section interactive \"Parcours d'apprentissage\" avec un court quiz pour déterminer les styles et les intérêts d'apprentissage, et un bouton pour commencer le quiz. \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, la FAQ, la politique de confidentialité de la plateforme et un bouton \"Nous contacter\" qui ouvre une fenêtre modale avec un formulaire de contact et des informations sur le support client. \n \nIncluez du contenu de remplissage pour l'arrière-plan vidéo, 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 devrait gérer le slogan dynamique dans la section héros, en faisant défiler les différents slogans toutes les 3 secondes."
        }
      ]
    }
  ]
)
print(message.content)
Voyant d'entrepriseExpert en formules Excel