Website wizard

Prompt

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. Spec: [site spec]

Sample query

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. Spec:
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.
4. An interactive "Learning Paths" section with a short quiz to determine learning styles and interests, and a button to start the quiz.
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 that opens a modal window with a contact form and customer support information.
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.

Sample response

Here's the HTML file for the one-page website for EduQuest:

<!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 */

        /* Resetting default margin and padding */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        /* Global styles */
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            background-color: #f9f9f9;
        }

        /* Navigation bar styles */
        .navbar {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            background-color: #333;
            padding: 10px 20px;
            z-index: 1000;
        }

        .navbar a {
            color: #fff;
            text-decoration: none;
            margin-right: 20px;
            font-size: 18px;
            transition: color 0.3s ease;
        }

        .navbar a:hover {
            color: #ddd;
        }

        /* Hero section styles */
        .hero {
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
            color: #fff;
            background: url('<https://via.placeholder.com/1920x1080>') center/cover no-repeat;
        }

        .hero h1 {
            font-size: 3em;
            margin-bottom: 20px;
        }

        .hero button {
            padding: 10px 20px;
            font-size: 18px;
            background-color: #4CAF50;
            border: none;
            color: #fff;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        .hero button:hover {
            background-color: #45a049;
        }

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

        .course-card {
            background-color: #fff;
            padding: 20px;
            margin-bottom: 20px;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }

        /* Learning paths section styles */
        .learning-paths {
            padding: 50px 20px;
            text-align: center;
        }

        .learning-paths button {
            padding: 10px 20px;
            font-size: 18px;
            background-color: #337ab7;
            border: none;
            color: #fff;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        .learning-paths button:hover {
            background-color: #286090;
        }

        /* Success stories section styles */
        .success-stories {
            padding: 50px 20px;
            text-align: center;
        }

        /* Footer styles */
        footer {
            background-color: #333;
            color: #fff;
            padding: 20px;
            text-align: center;
            position: relative;
            margin-top: 50px;
        }

        footer a {
            color: #fff;
            text-decoration: none;
            margin: 0 10px;
            font-size: 16px;
        }

        footer button {
            padding: 10px 20px;
            font-size: 16px;
            background-color: #337ab7;
            border: none;
            color: #fff;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        footer button:hover {
            background-color: #286090;
        }

        /* Modal styles */
        .modal {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0, 0, 0, 0.4);
        }

        .modal-content {
            background-color: #fefefe;
            margin: 20% auto;
            padding: 20px;
            border: 1px solid #888;
            width: 80%;
        }

        .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }

        .close:hover,
        .close:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }

        /* Responsive styles */
        @media screen and (max-width: 768px) {
            .hero {
                height: 70vh;
            }

            .hero h1 {
                font-size: 2em;
            }
        }

        @media screen and (max-width: 480px) {
            .hero h1 {
                font-size: 1.5em;
            }

            footer {
                padding: 20px 0;
            }

            footer button {
                padding: 8px 16px;
                font-size: 14px;
            }
        }
    </style>
</head>
<body>
    <!-- Navigation bar -->
    <div class="navbar">
        <a href="#math">Math</a>
        <a href="#science">Science</a>
        <a href="#languages">Languages</a>
        <a href="#arts">Arts</a>
        <input type="text" placeholder="Search...">
    </div>

    <!-- Hero section -->
    <section class="hero">
        <div>
            <h1 id="dynamic-tagline">Learn at your own pace</h1>
            <button onclick="location.href='#courses'">Get Started</button>
        </div>
    </section>

    <!-- Featured courses section -->
    <section class="featured-courses" id="courses">
        <h2>Featured Courses</h2>
        <div class="course-card">Course 1</div>
        <div class="course-card">Course 2</div>
        <div class="course-card">Course 3</div>
    </section>

    <!-- Learning paths section -->
    <section class="learning-paths">
        <h2>Learning Paths</h2>
        <button onclick="startQuiz()">Take Quiz</button>
    </section>

    <!-- Success stories section -->
    <section class="success-stories">
        <h2>Success Stories</h2>
        <div>Testimonial 1</div>
        <div>Testimonial 2</div>
        <div>Testimonial 3</div>
    </section>

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

    <!-- Modal -->
    <div id="