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 seule page basé sur 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 conception attrayantes 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, responsive et conviviale. 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 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 des catégories de cours (Mathématiques, Sciences, Langues, Arts) et une barre de recherche.
2. Une section héroïque avec une vidéo en arrière-plan montrant des étudiants apprenant en ligne, un slogan dynamique qui alterne entre “Apprenez à votre propre 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 quiz pour déterminer les styles d’apprentissage et les intérêts, 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, 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 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 doit gérer le slogan dynamique dans la section héroïque, alternant entre les différents slogans toutes les 3 secondes.

​
Exemple de sortie

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>EduQuest - Online Learning Platform</title>
    <style>
        /* CSS Styles */
        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</a></li>
                <li><a href="#">Science</a></li>
                <li><a href="#">Languages</a></li>
                <li><a href="#">Arts</a></li>
                <li><input type="text" placeholder="Search"></li>
            </ul>
        </nav>
    </header>

    <section class="hero">
        <video src="placeholder-video.mp4" autoplay loop muted></video>
        <h1>Welcome to EduQuest</h1>
        <p id="tagline">Learn at your own pace</p>
        <button>Get Started</button>
    </section>

    <section class="featured-courses">
        <h2>Featured Courses</h2>
        <div class="course-card">
            <img src="placeholder-course-image.jpg" alt="Course Image">
            <h3>Course Title</h3>
            <p>Instructor: John Doe</p>
            <p>Course description goes here.</p>
        </div>
        <div class="course-card">
            <img src="placeholder-course-image.jpg" alt="Course Image">
            <h3>Course Title</h3>
            <p>Instructor: Jane Smith</p>
            <p>Course description goes here.</p>
        </div>
    </section>

    <section class="success-stories">
        <h2>Success Stories</h2>
        <div class="testimonial">
            <p>"EduQuest helped me learn a new skill and advance my career. Highly recommended!"</p>
            <p>- John Doe</p>
        </div>
        <div class="testimonial">
            <p>"I never thought I could learn a new language online, but EduQuest made it possible. Thank you!"</p>
            <p>- Jane Smith</p>
        </div>
    </section>

    <footer>
        <a href="#">Blog</a>
        <a href="#">FAQ</a>
        <a href="#">Privacy Policy</a>
        <button>Contact Us</button>
    </footer>

    <script>
        // JavaScript Code
        const taglines = [
            "Learn at your own pace",
            "Discover new passions",
            "Expand your 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 seule page pour “EduQuest” avec les fonctionnalités et sections suivantes :

Une barre de navigation fixe avec des liens vers des catégories de cours (Math, Science, Languages, Arts) et une barre de recherche.

Une section héroïque avec un arrière-plan vidéo de remplacement, un slogan dynamique qui alterne entre “Learn at your own pace,” “Discover new passions,” et “Expand your horizons” toutes les 3 secondes, et un bouton “Get Started”.

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 “Success Stories” 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.

Un pied de page avec des liens vers le blog de la plateforme, la FAQ, la politique de confidentialité et un bouton “Contact Us”.

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éroïque, alternant entre les différents slogans toutes les 3 secondes en utilisant la fonction setInterval.

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

​
Requête API

import anthropic

client = anthropic.Anthropic( # defaults to os.environ.get("ANTHROPIC_API_KEY")
api_key="my_api_key",
)
message = client.messages.create(
  model="claude-opus-4-20250514",
  max_tokens=4000,
  temperature=0,
  system="Your task is to create a one-page website based on the given specifications, delivered as an HTML file with embedded JavaScript and CSS. The website should incorporate a variety of engaging and interactive design features, such as drop-down menus, dynamic text and content, clickable buttons, and more. Ensure that the design is visually appealing, responsive, and user-friendly. The HTML, CSS, and JavaScript code should be well-structured, efficiently organized, and properly commented for readability and maintainability.",
  messages=[
    {
      "role": "user",
      "content": [
        {
          "type": "text",
          "text": "Create a one-page website for an online learning platform called \"EduQuest\" with the following features and sections: \n \n1. A fixed navigation bar with links to course categories (Math, Science, Languages, Arts) and a search bar. \n \n2. A hero section with a video background showcasing students learning online, a dynamic tagline that rotates between \"Learn at your own pace,\" \"Discover new passions,\" and \"Expand your horizons\" every 3 seconds, and a \"Get Started\" button leading to a course catalog. \n \n3. A featured courses section displaying course cards with placeholders for course images, titles, instructors, and descriptions. \n \n4. An interactive \"Learning Paths\" section with a short quiz to determine learning styles and interests, and a button to start the quiz. \n \n5. A \"Success Stories\" section featuring testimonials from satisfied students, with placeholders for the testimonial text and student names. \n \n6. A footer with links to the platform's blog, FAQ, privacy policy, and a \"Contact Us\" button that opens a modal window with a contact form and customer support information. \n \nInclude filler placeholder content for the video background, course cards, and testimonials. Embed the CSS styles within the `<style>` tag in the `<head>` section and place the JavaScript code within the `<script>` tag at the end of the `<body>` section. \n \nThe JavaScript code should handle the dynamic tagline in the hero section, rotating through the different taglines every 3 seconds."
        }
      ]
    }
  ]
)
print(message.content)