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

Content
SystemTu tarea es crear un sitio web de una página basado en las especificaciones dadas, entregado como un archivo HTML con JavaScript y CSS integrados. El sitio web debe incorporar una variedad de características de diseño atractivas e interactivas, como menús desplegables, texto y contenido dinámico, botones clicables y más. Asegúrate de que el diseño sea visualmente atractivo, responsivo y fácil de usar. El código HTML, CSS y JavaScript debe estar bien estructurado, eficientemente organizado y debidamente comentado para facilitar su lectura y mantenimiento.
UserCrea un sitio web de una 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 hero con un fondo de video mostrando estudiantes aprendiendo en línea, un lema 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 cuestionario corto para determinar 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 nombres de estudiantes.
6. Un pie de página con enlaces al blog de la plataforma, FAQ, 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 relleno para el fondo de video, tarjetas de cursos y testimonios. Integra 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 lema dinámico en la sección hero, rotando entre los diferentes lemas 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="placeholder-video.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="placeholder-course-image.jpg" alt="Imagen del Curso">
            <h3>Título del Curso</h3>
            <p>Instructor: Juan Pérez</p>
            <p>Descripción del curso aquí.</p>
        </div>
        <div class="course-card">
            <img src="placeholder-course-image.jpg" alt="Imagen del Curso">
            <h3>Título del Curso</h3>
            <p>Instructor: María García</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>- Juan Pérez</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>- María García</p>
        </div>
    </section>

    <footer>
        <a href="#">Blog</a>
        <a href="#">FAQ</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 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 hero con un fondo de video de marcador de posición, un lema 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 nombres de estudiantes.

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

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

El código JavaScript maneja el lema dinámico en la sección hero, rotando entre los diferentes lemas cada 3 segundos usando la función setInterval.

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

​
Solicitud de API

import anthropic

client = anthropic.Anthropic( # por defecto usa os.environ.get("ANTHROPIC_API_KEY")
api_key="mi_clave_api",
)
message = client.messages.create(
  model="claude-3-5-sonnet-20241022",
  max_tokens=4000,
  temperature=0,
  system="Tu tarea es crear un sitio web de una página basado en las especificaciones dadas, entregado como un archivo HTML con JavaScript y CSS integrados. El sitio web debe incorporar una variedad de características de diseño atractivas e interactivas, como menús desplegables, texto y contenido dinámico, botones clicables y más. Asegúrate de que el diseño sea visualmente atractivo, responsivo y fácil de usar. El código HTML, CSS y JavaScript debe estar bien estructurado, eficientemente organizado y debidamente comentado para facilitar su lectura y mantenimiento.",
  messages=[
    {
      "role": "user", 
      "content": [
        {
          "type": "text",
          "text": "Crea un sitio web de una 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 hero con un fondo de video mostrando estudiantes aprendiendo en línea, un lema 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 cuestionario corto para determinar 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 nombres de estudiantes. \n \n6. Un pie de página con enlaces al blog de la plataforma, FAQ, 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 relleno para el fondo de video, tarjetas de cursos y testimonios. Integra 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 lema dinámico en la sección hero, rotando entre los diferentes lemas cada 3 segundos."
        }
      ]
    }
  ]
)
print(message.content)

Was this page helpful?

Clarividente corporativoExperto en fórmulas de Excel