Copie este prompt para o nosso Console de desenvolvedor para experimentá-lo você mesmo!

Conteúdo
SystemSua tarefa é criar um site de uma página com base nas especificações fornecidas, entregue como um arquivo HTML com JavaScript e CSS incorporados. O site deve incorporar uma variedade de recursos de design envolventes e interativos, como menus suspensos, texto e conteúdo dinâmicos, botões clicáveis e muito mais. Certifique-se de que o design seja visualmente atraente, responsivo e fácil de usar. O código HTML, CSS e JavaScript deve ser bem estruturado, organizado de forma eficiente e devidamente comentado para legibilidade e manutenção.
UserCrie um site de uma página para uma plataforma de aprendizado online chamada “EduQuest” com os seguintes recursos e seções:

1. Uma barra de navegação fixa com links para categorias de cursos (Matemática, Ciências, Idiomas, Artes) e uma barra de pesquisa.
2. Uma seção principal com um vídeo de fundo mostrando estudantes aprendendo online, um slogan dinâmico que alterna entre “Aprenda no seu próprio ritmo”, “Descubra novas paixões” e “Expanda seus horizontes” a cada 3 segundos, e um botão “Comece agora” que leva a um catálogo de cursos.
3. Uma seção de cursos em destaque exibindo cartões de cursos com espaços reservados para imagens, títulos, instrutores e descrições dos cursos.
4. Uma seção interativa de “Caminhos de Aprendizagem” com um pequeno questionário para determinar estilos e interesses de aprendizagem, e um botão para iniciar o questionário.
5. Uma seção de “Histórias de Sucesso” com depoimentos de alunos satisfeitos, com espaços reservados para o texto do depoimento e os nomes dos alunos.
6. Um rodapé com links para o blog, perguntas frequentes e política de privacidade da plataforma, e um botão “Fale Conosco” que abre uma janela modal com um formulário de contato e informações de suporte ao cliente.

Inclua conteúdo de espaço reservado para o vídeo de fundo, cartões de cursos e depoimentos. Incorpore os estilos CSS dentro da tag <style> na seção <head> e coloque o código JavaScript dentro da tag <script> no final da seção <body>.

O código JavaScript deve lidar com o slogan dinâmico na seção principal, alternando entre os diferentes slogans a cada 3 segundos.

​
Exemplo de saída

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>EduQuest - Plataforma de Aprendizado Online</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ática</a></li>
                <li><a href="#">Ciências</a></li>
                <li><a href="#">Idiomas</a></li>
                <li><a href="#">Artes</a></li>
                <li><input type="text" placeholder="Pesquisar"></li>
            </ul>
        </nav>
    </header>

    <section class="hero">
        <video src="placeholder-video.mp4" autoplay loop muted></video>
        <h1>Bem-vindo à EduQuest</h1>
        <p id="tagline">Aprenda no seu próprio ritmo</p>
        <button>Comece agora</button>
    </section>

    <section class="featured-courses">
        <h2>Cursos em Destaque</h2>
        <div class="course-card">
            <img src="placeholder-course-image.jpg" alt="Imagem do Curso">
            <h3>Título do Curso</h3>
            <p>Instrutor: João Silva</p>
            <p>Descrição do curso aqui.</p>
        </div>
        <div class="course-card">
            <img src="placeholder-course-image.jpg" alt="Imagem do Curso">
            <h3>Título do Curso</h3>
            <p>Instrutora: Maria Santos</p>
            <p>Descrição do curso aqui.</p>
        </div>
    </section>

    <section class="success-stories">
        <h2>Histórias de Sucesso</h2>
        <div class="testimonial">
            <p>"A EduQuest me ajudou a aprender uma nova habilidade e avançar na minha carreira. Altamente recomendado!"</p>
            <p>- João Silva</p>
        </div>
        <div class="testimonial">
            <p>"Eu nunca pensei que poderia aprender um novo idioma online, mas a EduQuest tornou isso possível. Obrigada!"</p>
            <p>- Maria Santos</p>
        </div>
    </section>

    <footer>
        <a href="#">Blog</a>
        <a href="#">Perguntas Frequentes</a>
        <a href="#">Política de Privacidade</a>
        <button>Fale Conosco</button>
    </footer>

    <script>
        // Código JavaScript
        const taglines = [
            "Aprenda no seu próprio ritmo",
            "Descubra novas paixões",
            "Expanda seus 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 cria um site de uma página para “EduQuest” com os seguintes recursos e seções:

Uma barra de navegação fixa com links para categorias de cursos (Matemática, Ciências, Idiomas, Artes) e uma barra de pesquisa.

Uma seção principal com um vídeo de fundo de espaço reservado, um slogan dinâmico que alterna entre “Aprenda no seu próprio ritmo”, “Descubra novas paixões” e “Expanda seus horizontes” a cada 3 segundos, e um botão “Comece agora”.

Uma seção de cursos em destaque exibindo cartões de cursos com espaços reservados para imagens, títulos, instrutores e descrições dos cursos.

Uma seção de “Histórias de Sucesso” com depoimentos de alunos satisfeitos, com espaços reservados para o texto do depoimento e os nomes dos alunos.

Um rodapé com links para o blog, perguntas frequentes e política de privacidade da plataforma, e um botão “Fale Conosco”.

Os estilos CSS estão incorporados dentro da tag <style> na seção <head>, e o código JavaScript está colocado dentro da tag <script> no final da seção <body>.

O código JavaScript lida com o slogan dinâmico na seção principal, alternando entre os diferentes slogans a cada 3 segundos usando a função setInterval.

Observe que o vídeo de fundo, as imagens dos cursos e os depoimentos são espaços reservados e devem ser substituídos por conteúdo real.

​
Requisição da API

Nota: O Claude 3 Opus estará disponível em breve na 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="Sua tarefa é criar um site de uma página com base nas especificações fornecidas, entregue como um arquivo HTML com JavaScript e CSS incorporados. O site deve incorporar uma variedade de recursos de design envolventes e interativos, como menus suspensos, texto e conteúdo dinâmicos, botões clicáveis e muito mais. Certifique-se de que o design seja visualmente atraente, responsivo e fácil de usar. O código HTML, CSS e JavaScript deve ser bem estruturado, organizado de forma eficiente e devidamente comentado para legibilidade e manutenção.",
  messages=[
    {
      "role": "user",
      "content": [
        {
          "type": "text",
          "text": "Crie um site de uma página para uma plataforma de aprendizado online chamada \"EduQuest\" com os seguintes recursos e seções: \n \n1. Uma barra de navegação fixa com links para categorias de cursos (Matemática, Ciências, Idiomas, Artes) e uma barra de pesquisa. \n \n2. Uma seção principal com um vídeo de fundo mostrando estudantes aprendendo online, um slogan dinâmico que alterna entre \"Aprenda no seu próprio ritmo\", \"Descubra novas paixões\" e \"Expanda seus horizontes\" a cada 3 segundos, e um botão \"Comece agora\" que leva a um catálogo de cursos. \n \n3. Uma seção de cursos em destaque exibindo cartões de cursos com espaços reservados para imagens, títulos, instrutores e descrições dos cursos. \n \n4. Uma seção interativa de \"Caminhos de Aprendizagem\" com um pequeno questionário para determinar estilos e interesses de aprendizagem, e um botão para iniciar o questionário. \n \n5. Uma seção de \"Histórias de Sucesso\" com depoimentos de alunos satisfeitos, com espaços reservados para o texto do depoimento e os nomes dos alunos. \n \n6. Um rodapé com links para o blog, perguntas frequentes e política de privacidade da plataforma, e um botão \"Fale Conosco\" que abre uma janela modal com um formulário de contato e informações de suporte ao cliente. \n \nInclua conteúdo de espaço reservado para o vídeo de fundo, cartões de cursos e depoimentos. Incorpore os estilos CSS dentro da tag `<style>` na seção `<head>` e coloque o código JavaScript dentro da tag `<script>` no final da seção `<body>`. \n \nO código JavaScript deve lidar com o slogan dinâmico na seção principal, alternando entre os diferentes slogans a cada 3 segundos."
        }
      ]
    }
  ]
)
print(message.content)
Clarividente corporativoEspecialista em fórmulas do Excel