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.
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 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:
- A fixed navigation bar with links to course categories (Math, Science, Languages, Arts) and a search bar.
- 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.
- A featured courses section displaying course cards with placeholders for course images, titles, instructors, and descriptions.
- A "Success Stories" section featuring testimonials from satisfied students, with placeholders for the testimonial text and student names.
- 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.
API request
pythonimport 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'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 `<style>` tag in the `<head>` section and place the JavaScript code within the `<script>` tag at the end of the `<body>` 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)