Back

Website wizard

Create one-page websites based on user specifications.

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.
user
Create a one-page website for an online learning platform called "EduQuest" with the following features and sections:

1. A fixed navigation bar with links to course categories (Math, Science, Languages, Arts) and a search bar.

2. 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.

3. A featured courses section displaying course cards with placeholders for course images, titles, instructors, and descriptions.

5. A "Success Stories" section featuring testimonials from satisfied students, with placeholders for the testimonial text and student names.

6. A footer with links to the platform's blog, FAQ, privacy policy, and a "Contact Us" button.

Include 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.

The JavaScript code should handle the dynamic tagline in the hero section, rotating through the different taglines every 3 seconds.

Here's the one-page website for the online learning platform "EduQuest" based on the given specifications:

html
<!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;
    }

    .navbar {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      background-color: #333;
      padding: 10px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .navbar a {
      color: white;
      text-decoration: none;
      margin-right: 20px;
    }

    .search-bar {
      padding: 5px;
      border-radius: 5px;
    }

    .hero-section {
      height: 500px;
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      color: white;
    }

    .hero-video {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      z-index: -1;
    }

    .tagline {
      font-size: 36px;
      margin-bottom: 20px;
    }

    .get-started {
      padding: 10px 20px;
      background-color: #ff5500;
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }

    .featured-courses,
    .success-stories {
      padding: 50px;
      text-align: center;
    }

    .course-card {
      display: inline-block;
      width: 300px;
      margin: 20px;
      padding: 20px;
      background-color: #f4f4f4;
      border-radius: 5px;
    }

    .testimonial {
      margin-bottom: 20px;
    }

    .footer {
      background-color: #333;
      color: white;
      padding: 20px;
      text-align: center;
    }

    .footer a {
      color: white;
      text-decoration: none;
      margin-right: 10px;
    }
  </style>
</head>
<body>
  <nav class="navbar">
    <div>
      <a href="#">Math</a>
      <a href="#">Science</a>
      <a href="#">Languages</a>
      <a href="#">Arts</a>
    </div>
    <input type="text" class="search-bar" placeholder="Search courses...">
  </nav>

  <section class="hero-section">
    <video class="hero-video" autoplay loop muted>
      <source src="video.mp4" type="video/mp4">
    </video>
    <h1 class="tagline"></h1>
    <button class="get-started">Get Started</button>
  </section>

  <section class="featured-courses">
    <h2>Featured Courses</h2>
    <div class="course-card">
      <img src="course1.jpg" alt="Course 1">
      <h3>Course Title 1</h3>
      <p>Instructor: John Doe</p>
      <p>Description: Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
    <div class="course-card">
      <img src="course2.jpg" alt="Course 2">
      <h3>Course Title 2</h3>
      <p>Instructor: Jane Smith</p>
      <p>Description: Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
    <!-- Add more course cards as needed -->
  </section>

  <section class="success-stories">
    <h2>Success Stories</h2>
    <div class="testimonial">
      <p>"EduQuest has been a game-changer for my learning journey. The courses are engaging and the instructors are knowledgeable. Highly recommended!"</p>
      <p>- Sarah Johnson</p>
    </div>
    <div class="testimonial">
      <p>"I never thought I could learn a new language online, but EduQuest made it possible. The interactive lessons and community support are amazing."</p>
      <p>- Michael Davis</p>
    </div>
    <!-- Add more testimonials as needed -->
  </section>

  <footer class="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 taglineIndex = 0;
    const taglineElement = document.querySelector(".tagline");

    function rotateTagline() {
      taglineElement.textContent = taglines[taglineIndex];
      taglineIndex = (taglineIndex + 1) % taglines.length;
    }

    setInterval(rotateTagline, 3000);
  </script>
</body>
</html>

This code creates a one-page website for the online learning platform "EduQuest" with the following features:

  1. A fixed navigation bar with links to course categories (Math, Science, Languages, Arts) and a search bar.

  2. A hero section with a video background (placeholder video file named "video.mp4"), a dynamic tagline that rotates every 3 seconds using JavaScript, and a "Get Started" button.

  3. A featured courses section with placeholders for course cards displaying course images, titles, instructors, and descriptions.

  4. A "Success Stories" section with placeholders for testimonials from satisfied students.

  5. A footer with links to the platform's blog, FAQ, privacy policy, and a "Contact Us" button.

The CSS styles are embedded within the <style> tag in the <head> section, and the JavaScript code is placed within the <script> tag at the end of the <body> section.

The JavaScript code handles the dynamic tagline rotation in the hero section, changing the tagline every 3 seconds using the setInterval() function.

Note: The code includes placeholder content for the video background, course cards, and testimonials. You would need to replace these placeholders with actual content and images as needed.

Here's the HTML, CSS, and JavaScript code for the one-page website for the online learning platform "EduQuest" with the requested features and sections:

html
<!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 go here */
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
    }

    /* Navigation bar */
    .navbar {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      background-color: #333;
      color: #fff;
      padding: 10px;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      align-items: center;
      z-index: 1;
    }

    .navbar .left-nav {
      display: flex;
      align-items: center;
    }

    .navbar .left-nav a {
      color: #fff;
      text-decoration: none;
      padding: 0 10px;
    }

    .navbar .right-nav {
      display: flex;
      align-items: center;
    }

    .navbar .right-nav input[type="text"] {
      padding: 5px;
      border: none;
      border-radius: 3px;
    }

    /* Hero section */
    .hero {
      position: relative;
      height: 500px;
      overflow: hidden;
    }

    .hero video {
      position: absolute;
      top: 50%;
      left: 50%;
      min-width: 100%;
      min-height: 100%;
      width: auto;
      height: auto;
      transform: translateX(-50%) translateY(-50%);
      z-index: -1;
    }

    .hero-content {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
      color: #fff;
    }

    .hero-content h1 {
      font-size: 36px;
      margin-bottom: 20px;
    }

    .hero-content button {
      padding: 10px 20px;
      background-color: #333;
      color: #fff;
      border: none;
      border-radius: 3px;
      cursor: pointer;
    }

    /* Featured courses */
    .featured-courses {
      padding: 50px;
      text-align: center;
    }

    .course-card {
      display: inline-block;
      width: 300px;
      padding: 20px;
      border: 1px solid #ccc;
      border-radius: 3px;
      margin: 10px;
      text-align: left;
    }

    .course-card img {
      width: 100%;
      height: 200px;
      object-fit: cover;
    }

    /* Success stories */
    .success-stories {
      padding: 50px;
      text-align: center;
      background-color: #f5f5f5;
    }

    .testimonial {
      display: inline-block;
      width: 300px;
      padding: 20px;
      border: 1px solid #ccc;
      border-radius: 3px;
      margin: 10px;
      text-align: left;
    }

    /* Footer */
    footer {
      padding: 20px;
      background-color: #333;
      color: #fff;
      text-align: center;
    }

    footer a {
      color: #fff;
      text-decoration: none;
      padding: 0 10px;
    }

    footer button {
      padding: 5px 10px;
      background-color: #fff;
      color: #333;
      border: none;
      border-radius: 3px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <!-- Navigation bar -->
  <div class="navbar">
    <div class="left-nav">
      <a href="#">Math</a>
      <a href="#">Science</a>
      <a href="#">Languages</a>
      <a href="#">Arts</a>
    </div>
    <div class="right-nav">
      <input type="text" placeholder="Search courses">
    </div>
  </div>

  <!-- Hero section -->
  <div class="hero">
    <video autoplay loop muted>
      <source src="placeholder-video.mp4" type="video/mp4">
    </video>
    <div class="hero-content">
      <h1 id="tagline">Learn at your own pace</h1>
      <button>Get Started</button>
    </div>
  </div>

  <!-- Featured courses -->
  <div class="featured-courses">
    <h2>Featured Courses</h2>
    <div class="course-card">
      <img src="placeholder-image.jpg" alt="Course Image">
      <h3>Course Title</h3>
      <p>Instructor Name</p>
      <p>Course description goes here...</p>
    </div>
    <div class="course-card">
      <img src="placeholder-image.jpg" alt="Course Image">
      <h3>Course Title</h3>
      <p>Instructor Name</p>
      <p>Course description goes here...</p>
    </div>
    <div class="course-card">
      <img src="placeholder-image.jpg" alt="Course Image">
      <h3>Course Title</h3>
      <p>Instructor Name</p>
      <p>Course description goes here...</p>
    </div>
  </div>

  <!-- Success stories -->
  <div class="success-stories">
    <h2>Success Stories</h2>
    <div class="testimonial">
      <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod, nisl eget aliquam ultricies, nunc nisl aliquet nisl, eget aliquam nisl nisl eget nisl."</p>
      <p>- Student Name</p>
    </div>
    <div class="testimonial">
      <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod, nisl eget aliquam ultricies, nunc nisl aliquet nisl, eget aliquam nisl nisl eget nisl."</p>
      <p>- Student Name</p>
    </div>
    <div class="testimonial">
      <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod, nisl eget aliquam ultricies, nunc nisl aliquet nisl, eget aliquam nisl nisl eget nisl."</p>
      <p>- Student Name</p>
    </div>
  </div>

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

  <script>
    // JavaScript code
    const tagline = document.getElementById('tagline');
    const taglines = ['Learn at your own pace', 'Discover new passions', 'Expand your horizons'];
    let currentTaglineIndex = 0;

    function rotateTagline() {
      currentTaglineIndex = (currentTaglineIndex + 1) % taglines.length;
      tagline.textContent = taglines[currentTaglineIndex];
    }

    setInterval(rotateTagline, 3000);
  </script>
</body>
</html>

This code includes the following features:

  1. A fixed navigation bar with links to course categories (Math, Science, Languages, Arts) and a search bar.
  2. A hero section with a video background (placeholder video), 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.
  3. A featured courses section displaying course cards with placeholders for course images, titles, instructors, and descriptions.
  4. A "Success Stories" section featuring testimonials from satisfied students, with placeholders for the testimonial text and student names.
  5. A footer with links to the platform's blog, FAQ, privacy policy, and a "Contact Us" button.

The CSS styles are embedded within the <style> tag in the <head> section, and the JavaScript code is placed within the <script> tag at the end of the <body> section.

The JavaScript code handles the dynamic tagline in the hero section, rotating through the different taglines every 3 seconds using the setInterval function.

Note: You'll need to replace the placeholder-video.mp4 and placeholder-image.jpg placeholders with the actual paths to your video and image files, respectively.

Here is the one-page website for the EduQuest online learning platform:

html
<!DOCTYPE html>
<html>
<head>
  <title>EduQuest - Online Learning Platform</title>
  
  <style>
    /* CSS styles go here */
    
    .navbar {
      background-color: #333;
      color: white;
      position: fixed;
      top: 0;
      width: 100%;
    }
    
    .hero {
      background-color: #ccc; 
      text-align: center;
      padding: 50px;
    }
    
    .course-card {
      border: 1px solid #ddd;
      padding: 20px;
      width: 200px;  
    }
    
    .testimonial {
      padding: 20px;
      border: 1px solid #aaa;
    }
    
    .footer {
      background-color: #333;
      color: white;
      padding: 20px;
      text-align: center; 
    }
  </style>
  
</head>

<body>

  <!-- Navigation bar -->
  <nav class="navbar">
    <a href="#">Math</a> 
    <a href="#">Science</a>
    <a href="#">Languages</a>
    <a href="#">Arts</a>
    
    <input type="text" placeholder="Search courses">
  </nav>

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

  <!-- Featured courses -->
  <section class="featured">
    <h2>Featured Courses</h2>
    
    <div class="course-card">
      <img src="course1.png">
      <h3>Course 1</h3>  
      <p>By Teacher 1</p>
      <p>Course 1 description</p>    
    </div>
    
    <div class="course-card">
      <img src="course2.png">
      <h3>Course 2</h3>    
      <p>By Teacher 2</p>
      <p>Course 2 description</p>
    </div>
  </section>

  <!-- Success stories -->
  <section class="stories">
    <h2>Success Stories</h2>
    
    <div class="testimonial">
      <p>&quot;I loved this course!&quot;</p>
      <p>- Jane D.</p>    
    </div>
    
    <div class="testimonial">
      <p>&quot;I learned so much.&quot;</p>
      <p>- Sam W.</p>
    </div>

  </section>
  
  <!-- Footer -->
  <footer class="footer"> 
    <a href="#">Blog</a>
    <a href="#">FAQ</a> 
    <a href="#">Privacy Policy</a>
      
    <button>Contact Us</button>
  </footer>
  
  <script>
    // JavaScript code goes here
    
    const taglines = [
      "Learn at your own pace",  
      "Discover new passions",
      "Expand your horizons"
    ];
    
    let index = 0;
    
    setInterval(() => {
      document.querySelector(".tagline").textContent = taglines[index];
      index = (index + 1) % taglines.length; 
    }, 3000);
    
  </script>
  
</body>
</html>

I've included placeholder content and styling to demonstrate the various sections and features. The JavaScript rotates through the array of taglines dynamically. You would need to fill in actual content, images, links, etc. and refine the styling further. But this should serve as a good starting point showcasing the requested one-page layout and functionality. Let me know if you need any clarification or have additional requirements to implement!

API request

python
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=2000,
      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":"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\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&#x27;s blog, FAQ, privacy policy, and a \"Contact Us\" button.\n\nInclude filler placeholder content for the video background, course cards, and testimonials. Embed the CSS styles within the `&lt;style&gt;` tag in the `&lt;head&gt;` section and place the JavaScript code within the `&lt;script&gt;` tag at the end of the `&lt;body&gt;` 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)
typescript
import Anthropic from "@anthropic-ai/sdk";

  const anthropic = new Anthropic({
      apiKey: "my_api_key", // defaults to process.env["ANTHROPIC_API_KEY"]
  });
  
  const msg = await anthropic.messages.create({
      model: "claude-3-opus-20240229",
      max_tokens: 2000,
      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":"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\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&#x27;s blog, FAQ, privacy policy, and a \"Contact Us\" button.\n\nInclude filler placeholder content for the video background, course cards, and testimonials. Embed the CSS styles within the `&lt;style&gt;` tag in the `&lt;head&gt;` section and place the JavaScript code within the `&lt;script&gt;` tag at the end of the `&lt;body&gt;` section.\n\nThe JavaScript code should handle the dynamic tagline in the hero section, rotating through the different taglines every 3 seconds."}]
  });
  console.log(msg);