i want build a edtech e-commerce website to sell my online academic courses, there are 3 sections, home, courses and contact, with a beautiful glass like floating navbar, with light and dark them and toggle button to switch between themes and in home page show, what i offer and whose for my course are, in courses page show our all courses, with tags like popular and price, their poster and title and description, in contact page show our contact info, basically i need a beautiful, modern clean edtech website for selling my academic courses. generate a full prompt to build this website using ai like (bolt.new, lovable.dev, v0.dev), i don't know about web development and design, i just tell you what are my basic needs are, now it is you responsibility to go further and deliver a industry standard, professional, beautiful and modern website - Initial Deployment
a9c83a0 verified | <html lang="en" class="light"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>EduMaster | Premium Online Courses</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <script> | |
| tailwind.config = { | |
| darkMode: 'class', | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: { | |
| light: '#4f46e5', | |
| dark: '#7c3aed' | |
| }, | |
| secondary: { | |
| light: '#f43f5e', | |
| dark: '#fb7185' | |
| } | |
| }, | |
| boxShadow: { | |
| 'glass': '0 4px 30px rgba(0, 0, 0, 0.1)', | |
| 'glass-dark': '0 4px 30px rgba(0, 0, 0, 0.3)' | |
| }, | |
| backdropBlur: { | |
| 'glass': '8px' | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| .glass { | |
| background: rgba(255, 255, 255, 0.2); | |
| backdrop-filter: blur(8px); | |
| -webkit-backdrop-filter: blur(8px); | |
| border: 1px solid rgba(255, 255, 255, 0.2); | |
| } | |
| .glass-dark { | |
| background: rgba(0, 0, 0, 0.2); | |
| backdrop-filter: blur(8px); | |
| -webkit-backdrop-filter: blur(8px); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| .hero-gradient { | |
| background: linear-gradient(135deg, rgba(79,70,229,0.8) 0%, rgba(244,63,94,0.8) 100%); | |
| } | |
| .hero-gradient-dark { | |
| background: linear-gradient(135deg, rgba(124,58,237,0.8) 0%, rgba(251,113,133,0.8) 100%); | |
| } | |
| .course-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .transition-slow { | |
| transition: all 0.5s ease; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 text-gray-800 dark:bg-gray-900 dark:text-gray-100 transition-slow min-h-screen"> | |
| <!-- Floating Glass Navbar --> | |
| <nav class="glass dark:glass-dark shadow-glass dark:shadow-glass-dark fixed w-full max-w-6xl left-1/2 -translate-x-1/2 top-4 rounded-xl z-50 px-6 py-3 mx-auto transition-slow"> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <i class="fas fa-graduation-cap text-2xl text-primary-light dark:text-primary-dark"></i> | |
| <span class="font-bold text-xl">EduMaster</span> | |
| </div> | |
| <div class="hidden md:flex space-x-8"> | |
| <a href="#home" class="nav-link hover:text-primary-light dark:hover:text-primary-dark transition-slow">Home</a> | |
| <a href="#courses" class="nav-link hover:text-primary-light dark:hover:text-primary-dark transition-slow">Courses</a> | |
| <a href="#contact" class="nav-link hover:text-primary-light dark:hover:text-primary-dark transition-slow">Contact</a> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <button id="theme-toggle" class="p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700 transition-slow"> | |
| <i class="fas fa-moon dark:hidden"></i> | |
| <i class="fas fa-sun hidden dark:block"></i> | |
| </button> | |
| <button class="bg-primary-light dark:bg-primary-dark text-white px-4 py-2 rounded-lg hover:opacity-90 transition-slow"> | |
| Sign In | |
| </button> | |
| <button class="md:hidden" id="mobile-menu-button"> | |
| <i class="fas fa-bars text-xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Mobile Menu --> | |
| <div id="mobile-menu" class="hidden md:hidden mt-4 pb-2"> | |
| <div class="flex flex-col space-y-3"> | |
| <a href="#home" class="nav-link hover:text-primary-light dark:hover:text-primary-dark transition-slow">Home</a> | |
| <a href="#courses" class="nav-link hover:text-primary-light dark:hover:text-primary-dark transition-slow">Courses</a> | |
| <a href="#contact" class="nav-link hover:text-primary-light dark:hover:text-primary-dark transition-slow">Contact</a> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Main Content --> | |
| <main class="pt-24 pb-16 px-4 md:px-8 max-w-6xl mx-auto"> | |
| <!-- Home Section --> | |
| <section id="home" class="min-h-screen flex flex-col justify-center"> | |
| <div class="hero-gradient dark:hero-gradient-dark rounded-3xl p-8 md:p-12 text-white mb-16"> | |
| <h1 class="text-4xl md:text-6xl font-bold mb-6">Transform Your Learning Experience</h1> | |
| <p class="text-xl md:text-2xl mb-8 max-w-3xl">Premium online courses designed by industry experts to accelerate your academic and professional growth.</p> | |
| <div class="flex flex-wrap gap-4"> | |
| <button class="bg-white text-primary-light dark:text-primary-dark px-6 py-3 rounded-lg font-semibold hover:bg-opacity-90 transition-slow"> | |
| Explore Courses | |
| </button> | |
| <button class="bg-transparent border-2 border-white px-6 py-3 rounded-lg font-semibold hover:bg-white hover:bg-opacity-20 transition-slow"> | |
| Free Trial | |
| </button> | |
| </div> | |
| </div> | |
| <div class="grid md:grid-cols-2 gap-8 mb-16"> | |
| <div class="glass dark:glass-dark p-6 rounded-2xl"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-primary-light dark:bg-primary-dark bg-opacity-20 p-3 rounded-full mr-4"> | |
| <i class="fas fa-chalkboard-teacher text-primary-light dark:text-primary-dark"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold">Expert Instructors</h3> | |
| </div> | |
| <p class="text-gray-600 dark:text-gray-300">Learn from industry professionals with years of teaching experience and real-world expertise.</p> | |
| </div> | |
| <div class="glass dark:glass-dark p-6 rounded-2xl"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-secondary-light dark:secondary-dark bg-opacity-20 p-3 rounded-full mr-4"> | |
| <i class="fas fa-certificate text-secondary-light dark:text-secondary-dark"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold">Certification</h3> | |
| </div> | |
| <p class="text-gray-600 dark:text-gray-300">Earn recognized certificates upon completion to boost your resume and career prospects.</p> | |
| </div> | |
| </div> | |
| <div class="mb-16"> | |
| <h2 class="text-3xl font-bold mb-8 text-center">Who Are Our Courses For?</h2> | |
| <div class="grid md:grid-cols-3 gap-6"> | |
| <div class="bg-white dark:bg-gray-800 p-6 rounded-2xl shadow-md text-center"> | |
| <div class="bg-blue-100 dark:bg-blue-900 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <i class="fas fa-user-graduate text-blue-500 dark:text-blue-300 text-2xl"></i> | |
| </div> | |
| <h3 class="font-semibold text-lg mb-2">Students</h3> | |
| <p class="text-gray-600 dark:text-gray-300">Supplement your academic studies with practical knowledge.</p> | |
| </div> | |
| <div class="bg-white dark:bg-gray-800 p-6 rounded-2xl shadow-md text-center"> | |
| <div class="bg-purple-100 dark:bg-purple-900 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <i class="fas fa-briefcase text-purple-500 dark:text-purple-300 text-2xl"></i> | |
| </div> | |
| <h3 class="font-semibold text-lg mb-2">Professionals</h3> | |
| <p class="text-gray-600 dark:text-gray-300">Upgrade your skills to stay competitive in the job market.</p> | |
| </div> | |
| <div class="bg-white dark:bg-gray-800 p-6 rounded-2xl shadow-md text-center"> | |
| <div class="bg-green-100 dark:bg-green-900 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <i class="fas fa-lightbulb text-green-500 dark:text-green-300 text-2xl"></i> | |
| </div> | |
| <h3 class="font-semibold text-lg mb-2">Lifelong Learners</h3> | |
| <p class="text-gray-600 dark:text-gray-300">Expand your knowledge in areas you're passionate about.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Courses Section --> | |
| <section id="courses" class="min-h-screen py-16"> | |
| <h2 class="text-3xl font-bold mb-4">Our Courses</h2> | |
| <p class="text-gray-600 dark:text-gray-300 mb-8">Browse our selection of premium academic courses designed for success.</p> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Course 1 --> | |
| <div class="course-card bg-white dark:bg-gray-800 rounded-2xl overflow-hidden shadow-md hover:shadow-xl transition-slow"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1501504905252-473c47e087f8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1074&q=80" | |
| alt="Data Science Fundamentals" class="w-full h-48 object-cover"> | |
| <div class="absolute top-4 right-4 bg-secondary-light dark:bg-secondary-dark text-white px-3 py-1 rounded-full text-sm font-semibold"> | |
| POPULAR | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h3 class="font-bold text-xl">Data Science Fundamentals</h3> | |
| <span class="bg-primary-light dark:bg-primary-dark text-white px-3 py-1 rounded-full text-sm font-semibold">$99</span> | |
| </div> | |
| <p class="text-gray-600 dark:text-gray-300 mb-4">Master the basics of data analysis, visualization, and machine learning in this comprehensive course.</p> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-star text-yellow-400 mr-1"></i> | |
| <span class="font-medium">4.8</span> | |
| <span class="text-gray-500 mx-2">|</span> | |
| <span class="text-gray-500">32 hrs</span> | |
| </div> | |
| <button class="text-primary-light dark:text-primary-dark font-semibold hover:underline">Enroll Now</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Course 2 --> | |
| <div class="course-card bg-white dark:bg-gray-800 rounded-2xl overflow-hidden shadow-md hover:shadow-xl transition-slow"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" | |
| alt="Advanced Mathematics" class="w-full h-48 object-cover"> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h3 class="font-bold text-xl">Advanced Mathematics</h3> | |
| <span class="bg-primary-light dark:bg-primary-dark text-white px-3 py-1 rounded-full text-sm font-semibold">$149</span> | |
| </div> | |
| <p class="text-gray-600 dark:text-gray-300 mb-4">Dive deep into calculus, linear algebra, and differential equations with practical applications.</p> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-star text-yellow-400 mr-1"></i> | |
| <span class="font-medium">4.9</span> | |
| <span class="text-gray-500 mx-2">|</span> | |
| <span class="text-gray-500">45 hrs</span> | |
| </div> | |
| <button class="text-primary-light dark:text-primary-dark font-semibold hover:underline">Enroll Now</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Course 3 --> | |
| <div class="course-card bg-white dark:bg-gray-800 rounded-2xl overflow-hidden shadow-md hover:shadow-xl transition-slow"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1563986768609-322da13575f3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" | |
| alt="Business Analytics" class="w-full h-48 object-cover"> | |
| <div class="absolute top-4 right-4 bg-secondary-light dark:bg-secondary-dark text-white px-3 py-1 rounded-full text-sm font-semibold"> | |
| POPULAR | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h3 class="font-bold text-xl">Business Analytics</h3> | |
| <span class="bg-primary-light dark:bg-primary-dark text-white px-3 py-1 rounded-full text-sm font-semibold">$129</span> | |
| </div> | |
| <p class="text-gray-600 dark:text-gray-300 mb-4">Learn how to transform data into actionable business insights and make data-driven decisions.</p> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-star text-yellow-400 mr-1"></i> | |
| <span class="font-medium">4.7</span> | |
| <span class="text-gray-500 mx-2">|</span> | |
| <span class="text-gray-500">38 hrs</span> | |
| </div> | |
| <button class="text-primary-light dark:text-primary-dark font-semibold hover:underline">Enroll Now</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Course 4 --> | |
| <div class="course-card bg-white dark:bg-gray-800 rounded-2xl overflow-hidden shadow-md hover:shadow-xl transition-slow"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1546410531-bb4caa6b424d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1171&q=80" | |
| alt="Web Development Bootcamp" class="w-full h-48 object-cover"> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h3 class="font-bold text-xl">Web Development Bootcamp</h3> | |
| <span class="bg-primary-light dark:bg-primary-dark text-white px-3 py-1 rounded-full text-sm font-semibold">$179</span> | |
| </div> | |
| <p class="text-gray-600 dark:text-gray-300 mb-4">From HTML/CSS to JavaScript frameworks, become a full-stack developer in 12 weeks.</p> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-star text-yellow-400 mr-1"></i> | |
| <span class="font-medium">4.9</span> | |
| <span class="text-gray-500 mx-2">|</span> | |
| <span class="text-gray-500">60 hrs</span> | |
| </div> | |
| <button class="text-primary-light dark:text-primary-dark font-semibold hover:underline">Enroll Now</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Course 5 --> | |
| <div class="course-card bg-white dark:bg-gray-800 rounded-2xl overflow-hidden shadow-md hover:shadow-xl transition-slow"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1624953587687-daf255b6b80a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" | |
| alt="Artificial Intelligence" class="w-full h-48 object-cover"> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h3 class="font-bold text-xl">Artificial Intelligence</h3> | |
| <span class="bg-primary-light dark:bg-primary-dark text-white px-3 py-1 rounded-full text-sm font-semibold">$199</span> | |
| </div> | |
| <p class="text-gray-600 dark:text-gray-300 mb-4">Explore the fundamentals of AI, machine learning, and neural networks with hands-on projects.</p> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-star text-yellow-400 mr-1"></i> | |
| <span class="font-medium">4.8</span> | |
| <span class="text-gray-500 mx-2">|</span> | |
| <span class="text-gray-500">50 hrs</span> | |
| </div> | |
| <button class="text-primary-light dark:text-primary-dark font-semibold hover:underline">Enroll Now</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Course 6 --> | |
| <div class="course-card bg-white dark:bg-gray-800 rounded-2xl overflow-hidden shadow-md hover:shadow-xl transition-slow"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1454165804606-c3aa57c92f37?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1173&q=80" | |
| alt="Digital Marketing" class="w-full h-48 object-cover"> | |
| <div class="absolute top-4 right-4 bg-secondary-light dark:bg-secondary-dark text-white px-3 py-1 rounded-full text-sm font-semibold"> | |
| POPULAR | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h3 class="font-bold text-xl">Digital Marketing</h3> | |
| <span class="bg-primary-light dark:bg-primary-dark text-white px-3 py-1 rounded-full text-sm font-semibold">$89</span> | |
| </div> | |
| <p class="text-gray-600 dark:text-gray-300 mb-4">Master SEO, social media marketing, content strategy, and analytics to grow any business.</p> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-star text-yellow-400 mr-1"></i> | |
| <span class="font-medium">4.6</span> | |
| <span class="text-gray-500 mx-2">|</span> | |
| <span class="text-gray-500">30 hrs</span> | |
| </div> | |
| <button class="text-primary-light dark:text-primary-dark font-semibold hover:underline">Enroll Now</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section id="contact" class="min-h-screen py-16"> | |
| <h2 class="text-3xl font-bold mb-4">Get In Touch</h2> | |
| <p class="text-gray-600 dark:text-gray-300 mb-8">Have questions? Reach out to our team for more information about our courses.</p> | |
| <div class="grid md:grid-cols-2 gap-12"> | |
| <div class="glass dark:glass-dark p-8 rounded-2xl"> | |
| <h3 class="text-2xl font-semibold mb-6">Contact Information</h3> | |
| <div class="space-y-6"> | |
| <div class="flex items-start"> | |
| <div class="bg-primary-light dark:bg-primary-dark bg-opacity-20 p-3 rounded-full mr-4"> | |
| <i class="fas fa-envelope text-primary-light dark:text-primary-dark"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium">Email Us</h4> | |
| <p class="text-gray-600 dark:text-gray-300">support@edumaster.com</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-primary-light dark:bg-primary-dark bg-opacity-20 p-3 rounded-full mr-4"> | |
| <i class="fas fa-phone-alt text-primary-light dark:text-primary-dark"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium">Call Us</h4> | |
| <p class="text-gray-600 dark:text-gray-300">+1 (555) 123-4567</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-primary-light dark:bg-primary-dark bg-opacity-20 p-3 rounded-full mr-4"> | |
| <i class="fas fa-map-marker-alt text-primary-light dark:text-primary-dark"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium">Visit Us</h4> | |
| <p class="text-gray-600 dark:text-gray-300">123 Education Street, Knowledge City</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-8"> | |
| <h4 class="font-medium mb-4">Follow Us</h4> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="bg-gray-200 dark:bg-gray-700 p-3 rounded-full hover:bg-primary-light dark:hover:bg-primary-dark hover:text-white transition-slow"> | |
| <i class="fab fa-facebook-f"></i> | |
| </a> | |
| <a href="#" class="bg-gray-200 dark:bg-gray-700 p-3 rounded-full hover:bg-primary-light dark:hover:bg-primary-dark hover:text-white transition-slow"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="bg-gray-200 dark:bg-gray-700 p-3 rounded-full hover:bg-primary-light dark:hover:bg-primary-dark hover:text-white transition-slow"> | |
| <i class="fab fa-linkedin-in"></i> | |
| </a> | |
| <a href="#" class="bg-gray-200 dark:bg-gray-700 p-3 rounded-full hover:bg-primary-light dark:hover:bg-primary-dark hover:text-white transition-slow"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="glass dark:glass-dark p-8 rounded-2xl"> | |
| <h3 class="text-2xl font-semibold mb-6">Send Us a Message</h3> | |
| <form> | |
| <div class="mb-6"> | |
| <label for="name" class="block mb-2 font-medium">Your Name</label> | |
| <input type="text" id="name" class="w-full px-4 py-3 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-primary-light dark:focus:ring-primary-dark"> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="email" class="block mb-2 font-medium">Email Address</label> | |
| <input type="email" id="email" class="w-full px-4 py-3 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-primary-light dark:focus:ring-primary-dark"> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="subject" class="block mb-2 font-medium">Subject</label> | |
| <input type="text" id="subject" class="w-full px-4 py-3 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-primary-light dark:focus:ring-primary-dark"> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="message" class="block mb-2 font-medium">Message</label> | |
| <textarea id="message" rows="4" class="w-full px-4 py-3 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-primary-light dark:focus:ring-primary-dark"></textarea> | |
| </div> | |
| <button type="submit" class="w-full bg-primary-light dark:bg-primary-dark text-white py-3 rounded-lg font-semibold hover:opacity-90 transition-slow"> | |
| Send Message | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="bg-gray-100 dark:bg-gray-800 py-12 px-4 md:px-8"> | |
| <div class="max-w-6xl mx-auto"> | |
| <div class="grid md:grid-cols-4 gap-8 mb-8"> | |
| <div> | |
| <div class="flex items-center space-x-2 mb-4"> | |
| <i class="fas fa-graduation-cap text-2xl text-primary-light dark:text-primary-dark"></i> | |
| <span class="font-bold text-xl">EduMaster</span> | |
| </div> | |
| <p class="text-gray-600 dark:text-gray-300">Empowering learners worldwide with premium online education.</p> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold text-lg mb-4">Quick Links</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#home" class="text-gray-600 dark:text-gray-300 hover:text-primary-light dark:hover:text-primary-dark transition-slow">Home</a></li> | |
| <li><a href="#courses" class="text-gray-600 dark:text-gray-300 hover:text-primary-light dark:hover:text-primary-dark transition-slow">Courses</a></li> | |
| <li><a href="#contact" class="text-gray-600 dark:text-gray-300 hover:text-primary-light dark:hover:text-primary-dark transition-slow">Contact</a></li> | |
| <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-primary-light dark:hover:text-primary-dark transition-slow">Blog</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold text-lg mb-4">Courses</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-primary-light dark:hover:text-primary-dark transition-slow">Data Science</a></li> | |
| <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-primary-light dark:hover:text-primary-dark transition-slow">Mathematics</a></li> | |
| <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-primary-light dark:hover:text-primary-dark transition-slow">Web Development</a></li> | |
| <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-primary-light dark:hover:text-primary-dark transition-slow">Business</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold text-lg mb-4">Newsletter</h4> | |
| <p class="text-gray-600 dark:text-gray-300 mb-4">Subscribe to get updates on new courses and offers.</p> | |
| <div class="flex"> | |
| <input type="email" placeholder="Your email" class="px-4 py-2 rounded-l-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 focus:outline-none w-full"> | |
| <button class="bg-primary-light dark:bg-primary-dark text-white px-4 py-2 rounded-r-lg hover:opacity-90 transition-slow"> | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="pt-8 border-t border-gray-200 dark:border-gray-700 flex flex-col md:flex-row justify-between items-center"> | |
| <p class="text-gray-600 dark:text-gray-300 mb-4 md:mb-0">© 2023 EduMaster. All rights reserved.</p> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-primary-light dark:hover:text-primary-dark transition-slow">Terms</a> | |
| <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-primary-light dark:hover:text-primary-dark transition-slow">Privacy</a> | |
| <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-primary-light dark:hover:text-primary-dark transition-slow">Cookies</a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Theme toggle functionality | |
| const themeToggle = document.getElementById('theme-toggle'); | |
| const html = document.documentElement; | |
| themeToggle.addEventListener('click', () => { | |
| html.classList.toggle('dark'); | |
| localStorage.setItem('theme', html.classList.contains('dark') ? 'dark' : 'light'); | |
| }); | |
| // Check for saved theme preference | |
| if (localStorage.getItem('theme') === 'dark' || (!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches)) { | |
| html.classList.add('dark'); | |
| } else { | |
| html.classList.remove('dark'); | |
| } | |
| // Mobile menu toggle | |
| const mobileMenuButton = document.getElementById('mobile-menu-button'); | |
| const mobileMenu = document.getElementById('mobile-menu'); | |
| mobileMenuButton.addEventListener('click', () => { | |
| mobileMenu.classList.toggle('hidden'); | |
| }); | |
| // Smooth scrolling for navigation links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| const targetId = this.getAttribute('href'); | |
| const targetElement = document.querySelector(targetId); | |
| if (targetElement) { | |
| window.scrollTo({ | |
| top: targetElement.offsetTop - 100, | |
| behavior: 'smooth' | |
| }); | |
| // Close mobile menu if open | |
| if (!mobileMenu.classList.contains('hidden')) { | |
| mobileMenu.classList.add('hidden'); | |
| } | |
| } | |
| }); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Enoy909/edumaster" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |