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

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

AI Website Builder

Advanced

Improve Claude's intelligence score from 49 to 57

Enable Claude extended thinking

Set a limit on the number of tokens Claude can use for extended thinking. Claude is unlikely to use more than 30,000 even if you set this higher.

Claude thinking budget (in tokens)

AI model

i47 💰:2.0

i57 💰:36.0

🏆 i65 💰:100.0

i63 💰:50.0

i61 💰:75.0

i30 💰:1.0

i58 💰:50.0

i54 💰:50.0

i56 💰:48.0

i48 💰:11.25

i55 💰:37.5

i52 💰:35.0

i40 💰:5.0

i49 💰:50.0

i51 💰:30.0

i43 💰:37.5

i34 💰:10.0

i44 💰:25.0

i18 💰:1.0

i29 💰:1.5

i38 💰:37.5

i33 💰:37.5

i42 💰:187.5

i36 💰:187.5

i37 💰:11.0

i39 💰:100.0

i28 💰:150.0

i20 💰:4.0

i23 💰:20.0

i16 💰:25.0

i13 💰:1.5

Generate privately

Your website request

Tip: Switch to high for best results. It will use more tokens thinking.

Reasoning effort

Simple questions

Intelligence: +2

Intelligence: +3

Upload a screenshot of a website you like. The AI will try to match the style.

Reference website image

System Message

Website Builder

Generated Websites

<!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 t...

<!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;
            font-family: Arial, sans-serif;
        }
        nav {
            position: fixed;
            top: 0;
            width: 100%;
            background: #333;
            color: #fff;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 20px;
            z-index: 1000;
        }
        nav a {
            color: #fff;
            margin: 0 15px;
            text-decoration: none;
        }
        nav input[type="text"] {
            padding: 5px;
        }
        .hero {
            position: relative;
            height: 400px;
            background: black;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #fff;
            text-align: center;
        }
        .hero video {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: -1;
        }
        .hero h1 {
            margin: 0;
            font-size: 3em;
        }
        .hero button {
            padding: 10px 20px;
            margin-top: 15px;
            background: #ff9800;
            border: none;
            color: #fff;
            cursor: pointer;
        }
        .section {
            padding: 60px 20px;
            text-align: center;
        }
        .courses {
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
        }
        .course-card {
            width: 200px;
            border: 1px solid #ccc;
            margin: 10px;
            padding: 10px;
        }
        footer {
            background: #333;
            color: #fff;
            padding: 20px;
            text-align: center;
        }
        footer a {
            color: #ff9800;
            text-decoration: none;
            margin: 0 10px;
        }
        /* Modal styles */
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            justify-content: center;
            align-items: center;
        }
        .modal-content {
            background: #fff;
            padding: 20px;
            text-align: left;
            border-radius: 5px;
            width: 300px;
        }
        .modal-content form {
            display: flex;
            flex-direction: column;
        }
        .modal-content form input, .modal-content form textarea {
            margin-bottom: 10px;
            padding: 10px;
        }
    </style>
</head>
<body>
    <nav>
        <div>
            <a href="#">Math</a>
            <a href="#">Science</a>
            <a href="#">Languages</a>
            <a href="#">Arts</a>
        </div>
        <input type="text" placeholder="Search courses">
    </nav>

    <div class="hero">
        <video src="video-placeholder.mp4" autoplay muted loop></video>
        <div>
            <h1 id="tagline">Learn at your own pace</h1>
            <button onclick="location.href='#courses-section'">Get Started</button>
        </div>
    </div>

    <div class="section" id="courses-section">
        <h2>Featured Courses</h2>
        <div class="courses">
            <div class="course-card">
                <img src="course-placeholder.jpg" alt="Course Image">
                <h3>Course Title 1</h3>
                <p>Instructor: John Doe</p>
                <p>Course Description goes here.</p>
            </div>
            <div class="course-card">
                <img src="course-placeholder.jpg" alt="Course Image">
                <h3>Course Title 2</h3>
                <p>Instructor: Jane Smith</p>
                <p>Course Description goes here.</p>
            </div>
            <div class="course-card">
                <img src="course-placeholder.jpg" alt="Course Image">
                <h3>Course Title 3</h3>
                <p>Instructor: Dr. Alex</p>
                <p>Course Description goes here.</p>
            </div>
        </div>
    </div>

    <div class="section">
        <h2>Determine Your Learning Path</h2>
        <p>Take a short quiz to find your optimal learning style and interests.</p>
        <button onclick="startQuiz()">Start Quiz</button>
    </div>

    <div class="section">
        <h2>Success Stories</h2>
        <div class="testimonial">
            <p>"EduQuest has changed my life! The courses are amazing and the instructors are top-notch!"</p>
            <p>- Sarah Johnson</p>
        </div>
        <div class="testimonial">
            <p>"I love the flexibility of learning at my own pace. Highly recommend EduQuest to everyone!"</p>
            <p>- Michael Brown</p>
        </div>
    </div>

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

    <div class="modal" id="contactModal">
        <div class="modal-content">
            <span onclick="closeModal()" style="float: right; cursor: pointer;">&times;</span>
            <h2>Contact Us</h2>
            <form>
                <input type="text" placeholder="Your Name">
                <input type="email" placeholder="Your Email">
                <textarea placeholder="Your Message"></textarea>
                <button type="submit">Submit</button>
            </form>
            <p>Customer support: support@eduquest.com</p>
        </div>
    </div>

    <script>
        let taglines = ["Learn at your own pace", "Discover new passions", "Expand your horizons"];
        let index = 0;

        function rotateTagline() {
            index = (index + 1) % taglines.length;
            document.getElementById("tagline").innerText = taglines[index];
        }

        setInterval(rotateTagline, 3000);

        function startQuiz() {
            alert("Quiz Functionality Coming Soon!");
        }

        function openModal() {
            document.getElementById('contactModal').style.display = 'flex';
        }

        function closeModal() {
            document.getElementById('contactModal').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..html

Generated Websites

Request another