Save time building landing page pages and articles. Ask AI to output html, css, and javascript according to your specifications.

AI Website Builder. Powered by a state-of-the-art AI models.

AI Website Wizard

Advanced

GPT-4o or Claude 3.5 Sonnet are recommended for best results.

AI model

Generate privately

Your website request

System Message

Website Wizard

Generated Websites

Question Answerer

AI Tutor

Essay Writer

AI Chat

Writing Improver

Redraw Image

AI Docs

AI Boards

Fill in the Blanker

Paraphraser

Extract Text from Image

Grammar Checker

Text Summarizer

AI Image Generator

Inpaint

Image Trace

Test Generator

Lesson Generator

Blog Post Writer

Chat PDF

Code Improver

Image to Prompt

Language Translator

PDF to Text

Magic Prompt

Remove Background

Fix Hands

Image to Video Maker

Change Photo Background

Cover Letter Writer

Photo Analyzer

Logo Art Generator

Function Writer

Selfie Refiner

Upscale

Photo Object Remover

Product Requirements Document Writer

Outcrop Image

AI Game Generator

Prompt Interpolator

Icon Maker

Photo Translator

Code Translator

Infinite Zoom

Video to Video

Portrait Maker

LinkedIn Headshot Maker

Plant Doctor

Gmail™ Customer Support Assistant

Part of Speech Identifier

Syllable Counter

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content...

Answers to: 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 th...

<!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>
        body, html {
            margin: 0;
            padding: 0;
            font-family: Arial, sans-serif;
        }
        .navbar {
            position: fixed;
            width: 100%;
            background-color: #333;
            color: white;
            display: flex;
            justify-content: space-between;
            padding: 10px 20px;
            top: 0;
            z-index: 1000;
        }
        .nav-links {
            display: flex;
            gap: 20px;
        }
        .nav-links a {
            color: white;
            text-decoration: none;
            padding: 10px;
        }
        .nav-links a:hover {
            background-color: #575757;
        }
        .search-bar {
            padding: 5px;
        }
        .hero {
            position: relative;
            text-align: center;
            color: white;
            height: 60vh;
            overflow: hidden;
        }
        .hero video {
            position: absolute;
            left: 50%;
            top: 50%;
            height: 100%;
            width: auto;
            z-index: -1;
            transform: translate(-50%, -50%);
        }
        .hero-content {
            position: relative;
            top: 20%;
            transform: translateY(-20%);
        }
        .hero h1 {
            font-size: 3em;
        }
        .hero .tagline {
            font-size: 1.5em;
            margin: 20px 0;
        }
        .hero .btn {
            padding: 15px 30px;
            background-color: #28a745;
            border: none;
            color: white;
            font-size: 1em;
            cursor: pointer;
        }
        .section {
            padding: 40px 20px;
        }
        .card {
            background-color: #f5f5f5;
            border-radius: 10px;
            padding: 20px;
            margin: 20px;
            max-width: 300px;
        }
        .courses, .testimonials {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
        }
        .path-quiz {
            text-align: center;
            padding: 20px;
        }
        .footer {
            background-color: #333;
            color: white;
            text-align: center;
            padding: 20px;
            position: relative;
        }
        .footer-links {
            margin-bottom: 20px;
        }
        .footer-links a {
            color: white;
            text-decoration: none;
        }
        .footer-links a:hover {
            text-decoration: underline;
        }
        .modal {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: white;
            padding: 20px;
            border-radius: 10px;
            z-index: 1001;
        }
        .modal-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.7);
            z-index: 1000;
        }
    </style>
</head>
<body>
    <div class="navbar">
        <div class="logo">EduQuest</div>
        <div class="nav-links">
            <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...">
    </div>

    <div class="hero">
        <video autoplay muted loop>
            <source src="https://www.w3schools.com/tags/movie.mp4" type="video/mp4">
        </video>
        <div class="hero-content">
            <h1>EduQuest</h1>
            <p class="tagline">Learn at your own pace</p>
            <button class="btn">Get Started</button>
        </div>
    </div>

    <div class="section featured-courses">
        <h2>Featured Courses</h2>
        <div class="courses">
            <div class="card">
                <h3>Course Title 1</h3>
                <p>Instructor: John Doe</p>
                <p>Description goes here...</p>
            </div>
            <div class="card">
                <h3>Course Title 2</h3>
                <p>Instructor: Jane Doe</p>
                <p>Description goes here...</p>
            </div>
            <div class="card">
                <h3>Course Title 3</h3>
                <p>Instructor: Jim Doe</p>
                <p>Description goes here...</p>
            </div>
        </div>
    </div>

    <div class="section path-quiz">
        <h2>Learning Paths</h2>
        <p>Take a short quiz to determine your learning style and interests!</p>
        <button class="btn">Start Quiz</button>
    </div>

    <div class="section success-stories">
        <h2>Success Stories</h2>
        <div class="testimonials">
            <div class="card">
                <p>"EduQuest helped me find my passion for coding!"</p>
                <p>- Sarah Williams</p>
            </div>
            <div class="card">
                <p>"The course material is top-notch and easy to follow."</p>
                <p>- Mark Johnson</p>
            </div>
            <div class="card">
                <p>"I love the flexibility of learning at my own pace."</p>
                <p>- Emily Brown</p>
            </div>
        </div>
    </div>

    <div class="footer">
        <div class="footer-links">
            <a href="#">Blog</a> | 
            <a href="#">FAQ</a> | 
            <a href="#">Privacy Policy</a> | 
            <a href="#" class="contact-us">Contact Us</a>
        </div>
        <p>&copy; 2023 EduQuest</p>
    </div>

    <div class="modal-overlay"></div>
    <div class="modal">
        <h3>Contact Us</h3>
        <form>
            <label for="name">Name:</label><br>
            <input type="text" id="name" name="name"><br>
            <label for="email">Email:</label><br>
            <input type="email" id="email" name="email"><br><br>
            <button type="submit">Submit</button>
        </form>
        <button class="btn close-modal">Close</button>
    </div>

    <script>
        // Dynamic tagline rotation
        const taglines = ["Learn at your own pace", "Discover new passions", "Expand your horizons"];
        let index = 0;
        const taglineElement = document.querySelector('.hero .tagline');

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

        setInterval(rotateTagline, 3000);

        // Modal functionality
        const contactUsButton = document.querySelector('.contact-us');
        const modal = document.querySelector('.modal');
        const modalOverlay = document.querySelector('.modal-overlay');
        const closeModalButton = document.querySelector('.close-modal');

        contactUsButton.addEventListener('click', function() {
            modal.style.display = 'block';
            modalOverlay.style.display = 'block';
        });

        closeModalButton.addEventListener('click', function() {
            modal.style.display = 'none';
            modalOverlay.style.display = 'none';
        });
    </script>
</body>
</html>

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_Use_gradients__colors__or_stock_photos_for_all_images.html

This HTML and embedded JavaScript provide a structured and styled one-page website for the EduQuest online learning platform, which includes all the specified sections while maintaining dynamic and interactive features. The video background, rotating tagline, and interactive contact modal add to the overall user experience. Feel free to replace placeholder content and video source with actual content as needed.

Generated Websites

Request another