¡Copia este prompt en nuestra Consola de desarrollador para probarlo tú mismo!

Contenido
SystemTu tarea es crear un sitio web de una sola página basado en las especificaciones dadas, entregado como un archivo HTML con JavaScript y CSS incrustados. El sitio web debe incorporar una variedad de características de diseño atractivas e interactivas, como menús desplegables, texto y contenido dinámicos, botones en los que se puede hacer clic y más. Asegúrate de que el diseño sea visualmente atractivo, receptivo y fácil de usar. El código HTML, CSS y JavaScript debe estar bien estructurado, organizado de manera eficiente y comentado adecuadamente para facilitar la lectura y el mantenimiento.
UserCrea un sitio web de una sola página para una plataforma de aprendizaje en línea llamada “EduQuest” con las siguientes características y secciones:

1. Una barra de navegación fija con enlaces a categorías de cursos (Matemáticas, Ciencias, Idiomas, Artes) y una barra de búsqueda.
2. Una sección principal con un video de fondo que muestra a estudiantes aprendiendo en línea, un eslogan dinámico que rota entre “Aprende a tu propio ritmo”, “Descubre nuevas pasiones” y “Expande tus horizontes” cada 3 segundos, y un botón “Comenzar” que lleva a un catálogo de cursos.
3. Una sección de cursos destacados que muestra tarjetas de cursos con marcadores de posición para imágenes de cursos, títulos, instructores y descripciones.
4. Una sección interactiva de “Rutas de aprendizaje” con un breve cuestionario para determinar los estilos de aprendizaje e intereses, y un botón para comenzar el cuestionario.
5. Una sección de “Historias de éxito” con testimonios de estudiantes satisfechos, con marcadores de posición para el texto del testimonio y los nombres de los estudiantes.
6. Un pie de página con enlaces al blog de la plataforma, preguntas frecuentes, política de privacidad y un botón “Contáctanos” que abre una ventana modal con un formulario de contacto e información de atención al cliente.

Incluye contenido de marcador de posición de relleno para el video de fondo, las tarjetas de cursos y los testimonios. Incrusta los estilos CSS dentro de la etiqueta <style> en la sección <head> y coloca el código JavaScript dentro de la etiqueta <script> al final de la sección <body>.

El código JavaScript debe manejar el eslogan dinámico en la sección principal, rotando entre los diferentes eslóganes cada 3 segundos.

​
Ejemplo de salida

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>EduQuest - Plataforma de Aprendizaje en Línea</title>
    <style>
        /* Estilos 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="#">Matemáticas</a></li>
                <li><a href="#">Ciencias</a></li>
                <li><a href="#">Idiomas</a></li>
                <li><a href="#">Artes</a></li>
                <li><input type="text" placeholder="Buscar"></li>
            </ul>
        </nav>
    </header>

    <section class="hero">
        <video src="video-placeholder.mp4" autoplay loop muted></video>
        <h1>Bienvenido a EduQuest</h1>
        <p id="tagline">Aprende a tu propio ritmo</p>
        <button>Comenzar</button>
    </section>

    <section class="featured-courses">
        <h2>Cursos Destacados</h2>
        <div class="course-card">
            <img src="imagen-curso-placeholder.jpg" alt="Imagen del Curso">
            <h3>Título del Curso</h3>
            <p>Instructor: John Doe</p>
            <p>Descripción del curso aquí.</p>
        </div>
        <div class="course-card">
            <img src="imagen-curso-placeholder.jpg" alt="Imagen del Curso">
            <h3>Título del Curso</h3>
            <p>Instructora: Jane Smith</p>
            <p>Descripción del curso aquí.</p>
        </div>
    </section>

    <section class="success-stories">
        <h2>Historias de Éxito</h2>
        <div class="testimonial">
            <p>"EduQuest me ayudó a aprender una nueva habilidad y avanzar en mi carrera. ¡Altamente recomendado!"</p>
            <p>- John Doe</p>
        </div>
        <div class="testimonial">
            <p>"Nunca pensé que podría aprender un nuevo idioma en línea, pero EduQuest lo hizo posible. ¡Gracias!"</p>
            <p>- Jane Smith</p>
        </div>
    </section>

    <footer>
        <a href="#">Blog</a>
        <a href="#">Preguntas Frecuentes</a>
        <a href="#">Política de Privacidad</a>
        <button>Contáctanos</button>
    </footer>

    <script>
        // Código JavaScript
        const taglines = [
            "Aprende a tu propio ritmo",
            "Descubre nuevas pasiones",
            "Expande tus horizontes"
        ];

        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>

Este código crea un sitio web de una sola página para “EduQuest” con las siguientes características y secciones:

Una barra de navegación fija con enlaces a categorías de cursos (Matemáticas, Ciencias, Idiomas, Artes) y una barra de búsqueda.

Una sección principal con un video de fondo de marcador de posición, un eslogan dinámico que rota entre “Aprende a tu propio ritmo”, “Descubre nuevas pasiones” y “Expande tus horizontes” cada 3 segundos, y un botón “Comenzar”.

Una sección de cursos destacados que muestra tarjetas de cursos con marcadores de posición para imágenes de cursos, títulos, instructores y descripciones.

Una sección de “Historias de éxito” con testimonios de estudiantes satisfechos, con marcadores de posición para el texto del testimonio y los nombres de los estudiantes.

Un pie de página con enlaces al blog de la plataforma, preguntas frecuentes, política de privacidad y un botón “Contáctanos”.

Los estilos CSS están incrustados dentro de la etiqueta <style> en la sección <head>, y el código JavaScript se coloca dentro de la etiqueta <script> al final de la sección <body>.

El código JavaScript maneja el eslogan dinámico en la sección principal, rotando entre los diferentes eslóganes cada 3 segundos utilizando la función setInterval.

Ten en cuenta que el video de fondo, las imágenes de los cursos y los testimonios son marcadores de posición y deben reemplazarse con contenido real.

​
Solicitud de 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-3-opus-20240229",
  max_tokens=4000,
  temperature=0,
  system="Tu tarea es crear un sitio web de una sola página basado en las especificaciones dadas, entregado como un archivo HTML con JavaScript y CSS incrustados. El sitio web debe incorporar una variedad de características de diseño atractivas e interactivas, como menús desplegables, texto y contenido dinámicos, botones en los que se puede hacer clic y más. Asegúrate de que el diseño sea visualmente atractivo, receptivo y fácil de usar. El código HTML, CSS y JavaScript debe estar bien estructurado, organizado de manera eficiente y comentado adecuadamente para facilitar la lectura y el mantenimiento.",
  messages=[
    {
      "role": "user",
      "content": [
        {
          "type": "text",
          "text": "Crea un sitio web de una sola página para una plataforma de aprendizaje en línea llamada \"EduQuest\" con las siguientes características y secciones: \n \n1. Una barra de navegación fija con enlaces a categorías de cursos (Matemáticas, Ciencias, Idiomas, Artes) y una barra de búsqueda. \n \n2. Una sección principal con un video de fondo que muestra a estudiantes aprendiendo en línea, un eslogan dinámico que rota entre \"Aprende a tu propio ritmo\", \"Descubre nuevas pasiones\" y \"Expande tus horizontes\" cada 3 segundos, y un botón \"Comenzar\" que lleva a un catálogo de cursos. \n \n3. Una sección de cursos destacados que muestra tarjetas de cursos con marcadores de posición para imágenes de cursos, títulos, instructores y descripciones. \n \n4. Una sección interactiva de \"Rutas de aprendizaje\" con un breve cuestionario para determinar los estilos de aprendizaje e intereses, y un botón para comenzar el cuestionario. \n \n5. Una sección de \"Historias de éxito\" con testimonios de estudiantes satisfechos, con marcadores de posición para el texto del testimonio y los nombres de los estudiantes. \n \n6. Un pie de página con enlaces al blog de la plataforma, preguntas frecuentes, política de privacidad y un botón \"Contáctanos\" que abre una ventana modal con un formulario de contacto e información de atención al cliente. \n \nIncluye contenido de marcador de posición de relleno para el video de fondo, las tarjetas de cursos y los testimonios. Incrusta los estilos CSS dentro de la etiqueta `<style>` en la sección `<head>` y coloca el código JavaScript dentro de la etiqueta `<script>` al final de la sección `<body>`. \n \nEl código JavaScript debe manejar el eslogan dinámico en la sección principal, rotando entre los diferentes eslóganes cada 3 segundos."
        }
      ]
    }
  ]
)
print(message.content)
Clarividente corporativoExperto en fórmulas de Excel