| <!DOCTYPE html> |
| <html lang="en" x-data="{ darkMode: localStorage.getItem('dark') === 'true', language: 'en' }" x-init="darkMode && document.documentElement.classList.add('dark')"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Future Academy - Education for Tomorrow</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" defer></script> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"> |
| <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet"> |
| <script> |
| tailwind.config = { |
| darkMode: 'class', |
| theme: { |
| extend: { |
| colors: { |
| primary: '#d5a539', |
| dark: { |
| 800: '#121826', |
| 900: '#0B0E15', |
| } |
| }, |
| fontFamily: { |
| 'heading': ['Space Grotesk', 'sans-serif'], |
| 'body': ['Poppins', 'sans-serif'], |
| }, |
| animation: { |
| 'float': 'float 6s ease-in-out infinite', |
| }, |
| keyframes: { |
| float: { |
| '0%, 100%': { transform: 'translateY(0)' }, |
| '50%': { transform: 'translateY(-20px)' }, |
| } |
| } |
| } |
| } |
| } |
| </script> |
| <style> |
| .wavy-bg { |
| position: relative; |
| } |
| .wavy-bg::after { |
| content: ""; |
| position: absolute; |
| bottom: 0; |
| left: 0; |
| width: 100%; |
| height: 30px; |
| background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%23f9fafb' fill-opacity='1' d='M0,192L48,197.3C96,203,192,213,288,229.3C384,245,480,267,576,250.7C672,235,768,181,864,181.3C960,181,1056,235,1152,234.7C1248,235,1344,181,1392,154.7L1440,128L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z'%3E%3C/path%3E%3C/svg%3E"); |
| background-size: cover; |
| z-index: -1; |
| } |
| .dark .wavy-bg::after { |
| background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%23121826' fill-opacity='1' d='M0,192L48,197.3C96,203,192,213,288,229.3C384,245,480,267,576,250.7C672,235,768,181,864,181.3C960,181,1056,235,1152,234.7C1248,235,1344,181,1392,154.7L1440,128L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z'%3E%3C/path%3E%3C/svg%3E"); |
| } |
| .wavy-top { |
| position: relative; |
| } |
| .wavy-top::before { |
| content: ""; |
| position: absolute; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 30px; |
| background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%23f9fafb' fill-opacity='1' d='M0,192L48,197.3C96,203,192,213,288,229.3C384,245,480,267,576,250.7C672,235,768,181,864,181.3C960,181,1056,235,1152,234.7C1248,235,1344,181,1392,154.7L1440,128L1440,0L1392,0C1344,0,1248,0,1152,0C1056,0,960,0,864,0C768,0,672,0,576,0C480,0,384,0,288,0C192,0,96,0,48,0L0,0Z'%3E%3C/path%3E%3C/svg%3E"); |
| background-size: cover; |
| z-index: -1; |
| } |
| .dark .wavy-top::before { |
| background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%23121826' fill-opacity='1' d='M0,192L48,197.3C96,203,192,213,288,229.3C384,245,480,267,576,250.7C672,235,768,181,864,181.3C960,181,1056,235,1152,234.7C1248,235,1344,181,1392,154.7L1440,128L1440,0L1392,0C1344,0,1248,0,1152,0C1056,0,960,0,864,0C768,0,672,0,576,0C480,0,384,0,288,0C192,0,96,0,48,0L0,0Z'%3E%3C/path%3E%3C/svg%3E"); |
| } |
| .dropdown:hover .dropdown-menu { |
| display: block; |
| } |
| .sticky-nav { |
| position: sticky; |
| top: 0; |
| z-index: 50; |
| transition: all 0.3s ease; |
| } |
| .nav-scrolled { |
| box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); |
| } |
| .dark .nav-scrolled { |
| box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -1px rgba(0, 0, 0, 0.3); |
| } |
| .slide { |
| transition: opacity 1s ease-in-out; |
| opacity: 0; |
| position: absolute; |
| width: 100%; |
| height: 100%; |
| } |
| .slide.active { |
| opacity: 1; |
| z-index: 1; |
| } |
| .bg-blur { |
| backdrop-filter: blur(10px); |
| } |
| |
| .dark ::-webkit-scrollbar { |
| width: 8px; |
| } |
| .dark ::-webkit-scrollbar-track { |
| background: #1a2438; |
| } |
| .dark ::-webkit-scrollbar-thumb { |
| background: #4a5568; |
| border-radius: 4px; |
| } |
| </style> |
| </head> |
| <body class="font-body bg-gray-50 text-gray-800 dark:bg-dark-900 dark:text-gray-200 transition-colors duration-300" @scroll.window="handleScroll()"> |
| |
| <header class="relative h-screen"> |
| |
| <div class="absolute inset-0 overflow-hidden"> |
| <div class="relative h-full w-full"> |
| |
| <div class="slide active flex items-center justify-center bg-gradient-to-r from-dark-900 to-dark-800"> |
| <div class="absolute inset-0 bg-black/40"></div> |
| <div class="container mx-auto px-6 relative z-10 text-center"> |
| <h1 class="text-4xl md:text-6xl font-heading font-bold mb-6 text-white animate-fade-in"> |
| <span class="text-primary">Future</span> Academy |
| </h1> |
| <p class="text-xl md:text-2xl max-w-3xl mx-auto mb-8 text-white/90">Preparing students for success in an ever-changing world with innovative education approaches.</p> |
| <div class="flex flex-wrap justify-center gap-4"> |
| <a href="#about" class="px-8 py-3 bg-primary hover:bg-yellow-600 text-white font-medium rounded-lg transition-colors shadow-lg">Explore More</a> |
| <a href="#contact" class="px-8 py-3 bg-white hover:bg-gray-100 text-gray-800 font-medium rounded-lg transition-colors shadow-lg">Contact Us</a> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="slide flex items-center justify-center bg-gradient-to-r from-blue-900 to-blue-700"> |
| <div class="absolute inset-0 bg-black/40"></div> |
| <div class="container mx-auto px-6 relative z-10 text-center"> |
| <h2 class="text-3xl md:text-5xl font-heading font-bold mb-6 text-white">STEM <span class="text-primary">Education</span></h2> |
| <p class="text-lg md:text-xl max-w-3xl mx-auto mb-8 text-white/90">State-of-the-art laboratories and programs to foster innovation and critical thinking.</p> |
| <button class="px-8 py-3 bg-primary hover:bg-yellow-600 text-white font-medium rounded-lg transition-colors shadow-lg">Our Programs</button> |
| </div> |
| </div> |
| |
| |
| <div class="slide flex items-center justify-center bg-gradient-to-r from-purple-900 to-indigo-700"> |
| <div class="absolute inset-0 bg-black/40"></div> |
| <div class="container mx-auto px-6 relative z-10 text-center"> |
| <h2 class="text-3xl md:text-5xl font-heading font-bold mb-6 text-white"> |
| <span class="text-primary">2024</span> Admissions Open |
| </h2> |
| <p class="text-lg md:text-xl max-w-3xl mx-auto mb-8 text-white/90">Limited seats available for our upcoming academic year. Apply now to secure your spot.</p> |
| <button class="px-8 py-3 bg-primary hover:bg-yellow-600 text-white font-medium rounded-lg transition-colors shadow-lg">Apply Now</button> |
| </div> |
| </div> |
| |
| |
| <div class="absolute bottom-8 left-0 right-0 z-10 flex justify-center space-x-2"> |
| <button class="w-3 h-3 rounded-full bg-white active:bg-primary focus:outline-none" @click="changeSlide(0)"></button> |
| <button class="w-3 h-3 rounded-full bg-white active:bg-primary focus:outline-none" @click="changeSlide(1)"></button> |
| <button class="w-3 h-3 rounded-full bg-white active:bg-primary focus:outline-none" @click="changeSlide(2)"></button> |
| </div> |
| </div> |
| </div> |
| |
| |
| <nav x-data="{ mobileMenuOpen: false }" class="sticky-nav bg-white/80 dark:bg-dark-800/80 bg-blur" :class="{ 'nav-scrolled': windowScroll > 50 }"> |
| <div class="container mx-auto px-6 py-4"> |
| <div class="flex items-center justify-between"> |
| |
| <div class="flex items-center"> |
| <a href="#" class="flex items-center"> |
| <div class="w-10 h-10 bg-primary rounded-full flex items-center justify-center mr-3"> |
| <i class="fas fa-graduation-cap text-white text-xl"></i> |
| </div> |
| <span class="text-xl font-heading font-bold dark:text-white">Future<span class="text-primary">Academy</span></span> |
| </a> |
| </div> |
| |
| |
| <div class="hidden md:flex items-center space-x-6"> |
| <div class="dropdown relative"> |
| <button class="flex items-center font-medium hover:text-primary transition-colors"> |
| <span>Home</span> |
| <i class="fas fa-chevron-down ml-1 text-xs"></i> |
| </button> |
| <div class="dropdown-menu absolute hidden mt-2 py-2 w-48 bg-white dark:bg-dark-800 rounded-md shadow-lg z-10"> |
| <a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-dark-700">Welcome</a> |
| <a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-dark-700">About Us</a> |
| <a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-dark-700">Our Team</a> |
| </div> |
| </div> |
| |
| <div class="dropdown relative"> |
| <button class="flex items-center font-medium hover:text-primary transition-colors"> |
| <span>Academics</span> |
| <i class="fas fa-chevron-down ml-1 text-xs"></i> |
| </button> |
| <div class="dropdown-menu absolute hidden mt-2 py-2 w-48 bg-white dark:bg-dark-800 rounded-md shadow-lg z-10"> |
| <a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-dark-700">Curriculum</a> |
| <a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-dark-700">STEM Programs</a> |
| <a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-dark-700">Arts & Humanities</a> |
| <a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-dark-700">Sports Academy</a> |
| </div> |
| </div> |
| |
| <div class="dropdown relative"> |
| <button class="flex items-center font-medium hover:text-primary transition-colors"> |
| <span>Admissions</span> |
| <i class="fas fa-chevron-down ml-1 text-xs"></i> |
| </button> |
| <div class="dropdown-menu absolute hidden mt-2 py-2 w-48 bg-white dark:bg-dark-800 rounded-md shadow-lg z-10"> |
| <a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-dark-700">Apply Now</a> |
| <a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-dark-700">Tuition & Fees</a> |
| <a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-dark-700">Scholarships</a> |
| <a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-dark-700">Virtual Tour</a> |
| </div> |
| </div> |
| |
| <a href="#" class="font-medium hover:text-primary transition-colors">Events</a> |
| <a href="#" class="font-medium hover:text-primary transition-colors">About</a> |
| <a href="#" class="font-medium hover:text-primary transition-colors">Contact</a> |
| </div> |
| |
| |
| <div class="flex items-center space-x-4"> |
| |
| <div class="relative" x-data="{ open: false }"> |
| <button @click="open = !open" class="flex items-center space-x-1 focus:outline-none"> |
| <span class="hidden sm:inline"> |
| <span x-text="language === 'en' ? 'English' : language === 'fr' ? 'French' : language === 'ar' ? 'Arabic' : language"></span> |
| </span> |
| <i class="fas fa-globe"></i> |
| <i class="fas fa-chevron-down text-xs"></i> |
| </button> |
| <div x-show="open" @click.away="open = false" class="absolute right-0 mt-2 w-32 bg-white dark:bg-dark-800 rounded-md shadow-lg z-50"> |
| <div class="py-1"> |
| <button @click="language = 'en'; open = false" class="block w-full text-left px-4 py-2 hover:bg-gray-100 dark:hover:bg-dark-700">English</button> |
| <button @click="language = 'fr'; open = false" class="block w-full text-left px-4 py-2 hover:bg-gray-100 dark:hover:bg-dark-700">French</button> |
| <button @click="language = 'ar'; open = false" class="block w-full text-left px-4 py-2 hover:bg-gray-100 dark:hover:bg-dark-700">Arabic</button> |
| <button @click="language = 'es'; open = false" class="block w-full text-left px-4 py-2 hover:bg-gray-100 dark:hover:bg-dark-700">Spanish</button> |
| <button @click="language = 'de'; open = false" class="block w-full text-left px-4 py-2 hover:bg-gray-100 dark:hover:bg-dark-700">German</button> |
| </div> |
| </div> |
| </div> |
| |
| |
| <button @click="darkMode = !darkMode; $nextTick(() => { localStorage.setItem('dark', darkMode); document.documentElement.classList.toggle('dark', darkMode) })" class="p-2 rounded-full focus:outline-none"> |
| <i x-show="!darkMode" class="fas fa-moon text-gray-700"></i> |
| <i x-show="darkMode" class="fas fa-sun text-yellow-300"></i> |
| </button> |
| |
| |
| <button @click="mobileMenuOpen = !mobileMenuOpen" class="md:hidden p-2 rounded-full focus:outline-none"> |
| <i x-show="!mobileMenuOpen" class="fas fa-bars"></i> |
| <i x-show="mobileMenuOpen" class="fas fa-times"></i> |
| </button> |
| </div> |
| </div> |
| |
| |
| <div x-show="mobileMenuOpen" class="md:hidden mt-4 py-4 border-t border-gray-200 dark:border-dark-700"> |
| <div class="flex flex-col space-y-3"> |
| <div x-data="{ open: false }"> |
| <button @click="open = !open" class="w-full flex justify-between items-center py-2"> |
| <span>Home</span> |
| <i class="fas fa-chevron-down text-xs transition-transform duration-200" :class="{ 'transform rotate-180': open }"></i> |
| </button> |
| <div x-show="open" class="pl-4 mt-2 space-y-2"> |
| <a href="#" class="block py-1">Welcome</a> |
| <a href="#" class="block py-1">About Us</a> |
| <a href="#" class="block py-1">Our Team</a> |
| </div> |
| </div> |
| |
| <div x-data="{ open: false }"> |
| <button @click="open = !open" class="w-full flex justify-between items-center py-2"> |
| <span>Academics</span> |
| <i class="fas fa-chevron-down text-xs transition-transform duration-200" :class="{ 'transform rotate-180': open }"></i> |
| </button> |
| <div x-show="open" class="pl-4 mt-2 space-y-2"> |
| <a href="#" class="block py-1">Curriculum</a> |
| <a href="#" class="block py-1">STEM Programs</a> |
| <a href="#" class="block py-1">Arts & Humanities</a> |
| <a href="#" class="block py-1">Sports Academy</a> |
| </div> |
| </div> |
| |
| <div x-data="{ open: false }"> |
| <button @click="open = !open" class="w-full flex justify-between items-center py-2"> |
| <span>Admissions</span> |
| <i class="fas fa-chevron-down text-xs transition-transform duration-200" :class="{ 'transform rotate-180': open }"></i> |
| </button> |
| <div x-show="open" class="pl-4 mt-2 space-y-2"> |
| <a href="#" class="block py-1">Apply Now</a> |
| <a href="#" class="block py-1">Tuition & Fees</a> |
| <a href="#" class="block py-1">Scholarships</a> |
| <a href="#" class="block py-1">Virtual Tour</a> |
| </div> |
| </div> |
| |
| <a href="#" class="py-2">Events</a> |
| <a href="#" class="py-2">About</a> |
| <a href="#" class="py-2">Contact</a> |
| </div> |
| </div> |
| </div> |
| </nav> |
| </header> |
|
|
| |
| <section id="about" class="py-20 wavy-bg"> |
| <div class="container mx-auto px-6"> |
| <div class="flex flex-col lg:flex-row items-center"> |
| <div class="lg:w-1/2 mb-12 lg:mb-0 lg:pr-12"> |
| <h2 class="text-3xl md:text-4xl font-heading font-bold mb-6">About <span class="text-primary">Future Academy</span></h2> |
| <p class="text-lg mb-6">Founded in 2010, Future Academy has established itself as a leader in innovative education, blending traditional learning with modern technologies and methodologies to prepare students for the challenges of tomorrow.</p> |
| <div class="grid grid-cols-2 gap-6 mb-8"> |
| <div class="flex items-start"> |
| <div class="text-primary mr-4 mt-1"> |
| <i class="fas fa-check-circle text-2xl"></i> |
| </div> |
| <div> |
| <h3 class="font-semibold text-lg mb-1">Mission</h3> |
| <p class="text-gray-600 dark:text-gray-300">Empowering students through holistic education.</p> |
| </div> |
| </div> |
| <div class="flex items-start"> |
| <div class="text-primary mr-4 mt-1"> |
| <i class="fas fa-star text-2xl"></i> |
| </div> |
| <div> |
| <h3 class="font-semibold text-lg mb-1">Vision</h3> |
| <p class="text-gray-600 dark:text-gray-300">Creating future leaders and innovators.</p> |
| </div> |
| </div> |
| <div class="flex items-start"> |
| <div class="text-primary mr-4 mt-1"> |
| <i class="fas fa-heart text-2xl"></i> |
| </div> |
| <div> |
| <h3 class="font-semibold text-lg mb-1">Values</h3> |
| <p class="text-gray-600 dark:text-gray-300">Integrity, excellence, and innovation.</p> |
| </div> |
| </div> |
| <div class="flex items-start"> |
| <div class="text-primary mr-4 mt-1"> |
| <i class="fas fa-users text-2xl"></i> |
| </div> |
| <div> |
| <h3 class="font-semibold text-lg mb-1">Community</h3> |
| <p class="text-gray-600 dark:text-gray-300">Diverse and inclusive environment.</p> |
| </div> |
| </div> |
| </div> |
| <button class="px-6 py-3 bg-primary hover:bg-yellow-600 text-white font-medium rounded-lg transition-colors">Learn More</button> |
| </div> |
| <div class="lg:w-1/2 relative"> |
| <div class="bg-gray-200 dark:bg-dark-800 rounded-xl overflow-hidden shadow-xl"> |
| <img src="https://images.unsplash.com/photo-1522202176988-66273c2fd55f?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="Students in classroom" class="w-full h-auto"> |
| </div> |
| <div class="absolute -bottom-6 -right-6 bg-primary text-white p-4 rounded-lg shadow-lg w-1/2 z-10"> |
| <div class="text-center"> |
| <h3 class="text-xl font-heading font-bold mb-1">25+</h3> |
| <p class="text-sm">Specialized Programs</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-16 bg-primary dark:bg-primary/90 text-white"> |
| <div class="container mx-auto px-6"> |
| <div class="text-center mb-16"> |
| <h2 class="text-3xl md:text-4xl font-heading font-bold mb-4">Why Parents Choose Us</h2> |
| <p class="max-w-2xl mx-auto text-lg opacity-90">Our achievements speak for themselves. Here are some quick facts about our school.</p> |
| </div> |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-8"> |
| <div class="text-center"> |
| <div class="text-4xl font-bold mb-2">98%</div> |
| <p class="text-sm uppercase tracking-wider">Graduation Rate</p> |
| </div> |
| <div class="text-center"> |
| <div class="text-4xl font-bold mb-2">100+</div> |
| <p class="text-sm uppercase tracking-wider">Extracurricular Activities</p> |
| </div> |
| <div class="text-center"> |
| <div class="text-4xl font-bold mb-2">1:12</div> |
| <p class="text-sm uppercase tracking-wider">Student-Teacher Ratio</p> |
| </div> |
| <div class="text-center"> |
| <div class="text-4xl font-bold mb-2">85%</div> |
| <p class="text-sm uppercase tracking-wider">University Acceptance</p> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-20"> |
| <div class="container mx-auto px-6"> |
| <div class="text-center mb-16"> |
| <h2 class="text-3xl md:text-4xl font-heading font-bold mb-4">Why Choose <span class="text-primary">Future Academy</span></h2> |
| <p class="max-w-2xl mx-auto text-gray-600 dark:text-gray-300">We provide the best educational experience with our unique approach and facilities.</p> |
| </div> |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
| <div class="bg-white dark:bg-dark-800 p-8 rounded-xl shadow-lg hover:shadow-xl transition-shadow"> |
| <div class="text-primary mb-4"> |
| <i class="fas fa-brain text-4xl"></i> |
| </div> |
| <h3 class="text-xl font-semibold mb-3">Innovative Curriculum</h3> |
| <p class="text-gray-600 dark:text-gray-300">Our curriculum blends core subjects with critical 21st-century skills like coding, financial literacy, and design thinking.</p> |
| </div> |
| <div class="bg-white dark:bg-dark-800 p-8 rounded-xl shadow-lg hover:shadow-xl transition-shadow"> |
| <div class="text-primary mb-4"> |
| <i class="fas fa-chalkboard-teacher text-4xl"></i> |
| </div> |
| <h3 class="text-xl font-semibold mb-3">Expert Faculty</h3> |
| <p class="text-gray-600 dark:text-gray-300">Our teachers are not just educators but mentors with real-world experience in their fields of expertise.</p> |
| </div> |
| <div class="bg-white dark:bg-dark-800 p-8 rounded-xl shadow-lg hover:shadow-xl transition-shadow"> |
| <div class="text-primary mb-4"> |
| <i class="fas fa-laptop-code text-4xl"></i> |
| </div> |
| <h3 class="text-xl font-semibold mb-3">Tech-Integrated Learning</h3> |
| <p class="text-gray-600 dark:text-gray-300">Smart classrooms, VR labs, and 1:1 device programs ensure students are comfortable with technology.</p> |
| </div> |
| <div class="bg-white dark:bg-dark-800 p-8 rounded-xl shadow-lg hover:shadow-xl transition-shadow"> |
| <div class="text-primary mb-4"> |
| <i class="fas fa-globe-americas text-4xl"></i> |
| </div> |
| <h3 class="text-xl font-semibold mb-3">Global Perspective</h3> |
| <p class="text-gray-600 dark:text-gray-300">International exchange programs and globally focused curriculum prepare students for a connected world.</p> |
| </div> |
| <div class="bg-white dark:bg-dark-800 p-8 rounded-xl shadow-lg hover:shadow-xl transition-shadow"> |
| <div class="text-primary mb-4"> |
| <i class="fas fa-heartbeat text-4xl"></i> |
| </div> |
| <h3 class="text-xl font-semibold mb-3">Health & Wellness</h3> |
| <p class="text-gray-600 dark:text-gray-300">Comprehensive programs supporting physical and mental health of all students.</p> |
| </div> |
| <div class="bg-white dark:bg-dark-800 p-8 rounded-xl shadow-lg hover:shadow-xl transition-shadow"> |
| <div class="text-primary mb-4"> |
| <i class="fas fa-hand-holding-heart text-4xl"></i> |
| </div> |
| <h3 class="text-xl font-semibold mb-3">Personalized Support</h3> |
| <p class="text-gray-600 dark:text-gray-300">Individual learning plans and dedicated advisors ensure each student's success.</p> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-20 bg-gray-100 dark:bg-dark-800 wavy-top"> |
| <div class="container mx-auto px-6"> |
| <div class="text-center mb-16"> |
| <h2 class="text-3xl md:text-4xl font-heading font-bold mb-4">Our <span class="text-primary">Academic Stages</span></h2> |
| <p class="max-w-2xl mx-auto text-gray-600 dark:text-gray-300">Tailored education for each developmental stage of your child's growth.</p> |
| </div> |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"> |
| |
| <div class="group relative overflow-hidden bg-white dark:bg-dark-700 rounded-xl shadow-lg transition-all duration-300 hover:-translate-y-2"> |
| <div class="h-48 overflow-hidden"> |
| <img src="https://images.unsplash.com/photo-1541692641319-981cc79ee10a?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="Kindergarten" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"> |
| </div> |
| <div class="p-6"> |
| <div class="absolute top-4 right-4 bg-primary text-white px-3 py-1 rounded-full text-xs font-medium">Ages 3-5</div> |
| <h3 class="text-xl font-semibold mb-2">Kindergarten</h3> |
| <p class="text-gray-600 dark:text-gray-300 mb-4">Play-based learning focusing on social skills, early literacy, and numeracy foundations.</p> |
| <a href="#" class="text-primary font-medium flex items-center">Learn More <i class="fas fa-arrow-right ml-2"></i></a> |
| </div> |
| </div> |
| |
| |
| <div class="group relative overflow-hidden bg-white dark:bg-dark-700 rounded-xl shadow-lg transition-all duration-300 hover:-translate-y-2"> |
| <div class="h-48 overflow-hidden"> |
| <img src="https://images.unsplash.com/photo-1591123120675-6f7f1aae0e5b?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="Elementary" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"> |
| </div> |
| <div class="p-6"> |
| <div class="absolute top-4 right-4 bg-primary text-white px-3 py-1 rounded-full text-xs font-medium">Grades 1-5</div> |
| <h3 class="text-xl font-semibold mb-2">Elementary School</h3> |
| <p class="text-gray-600 dark:text-gray-300 mb-4">Building strong academic foundations while nurturing curiosity and creativity.</p> |
| <a href="#" class="text-primary font-medium flex items-center">Learn More <i class="fas fa-arrow-right ml-2"></i></a> |
| </div> |
| </div> |
| |
| |
| <div class="group relative overflow-hidden bg-white dark:bg-dark-700 rounded-xl shadow-lg transition-all duration-300 hover:-translate-y-2"> |
| <div class="h-48 overflow-hidden"> |
| <img src="https://images.unsplash.com/photo-1546410531-bb4caa6b424d?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="Middle School" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"> |
| </div> |
| <div class="p-6"> |
| <div class="absolute top-4 right-4 bg-primary text-white px-3 py-1 rounded-full text-xs font-medium">Grades 6-8</div> |
| <h3 class="text-xl font-semibold mb-2">Middle School</h3> |
| <p class="text-gray-600 dark:text-gray-300 mb-4">Developing critical thinking skills and exploring diverse academic interests.</p> |
| <a href="#" class="text-primary font-medium flex items-center">Learn More <i class="fas fa-arrow-right ml-2"></i></a> |
| </div> |
| </div> |
| |
| |
| <div class="group relative overflow-hidden bg-white dark:bg-dark-700 rounded-xl shadow-lg transition-all duration-300 hover:-translate-y-2"> |
| <div class="h-48 overflow-hidden"> |
| <img src="https://images.unsplash.com/photo-1606761568499-6d2451b23c66?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="High School" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"> |
| </div> |
| <div class="p-6"> |
| <div class="absolute top-4 right-4 bg-primary text-white px-3 py-1 rounded-full text-xs font-medium">Grades 9-12</div> |
| <h3 class="text-xl font-semibold mb-2">High School</h3> |
| <p class="text-gray-600 dark:text-gray-300 mb-4">College preparatory program with advanced placement and career pathways.</p> |
| <a href="#" class="text-primary font-medium flex items-center">Learn More <i class="fas fa-arrow-right ml-2"></i></a> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-20 wavy-bg"> |
| <div class="container mx-auto px-6"> |
| <div class="text-center mb-16"> |
| <h2 class="text-3xl md:text-4xl font-heading font-bold mb-4">Our <span class="text-primary">World-Class Facilities</span></h2> |
| <p class="max-w-2xl mx-auto text-gray-600 dark:text-gray-300">State-of-the-art learning environments designed to inspire innovation and creativity.</p> |
| </div> |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
| |
| <div class="space-y-8"> |
| <div class="bg-white dark:bg-dark-800 p-8 rounded-xl shadow-lg"> |
| <div class="text-primary mb-4"> |
| <i class="fas fa-flask text-3xl"></i> |
| </div> |
| <h3 class="text-xl font-semibold mb-3">Science & Innovation Labs</h3> |
| <p class="text-gray-600 dark:text-gray-300">Modern laboratories equipped with cutting-edge technology for physics, chemistry, biology, and robotics.</p> |
| </div> |
| <div class="bg-white dark:bg-dark-800 p-8 rounded-xl shadow-lg"> |
| <div class="text-primary mb-4"> |
| <i class="fas fa-music text-3xl"></i> |
| </div> |
| <h3 class="text-xl font-semibold mb-3">Performing Arts Center</h3> |
| <p class="text-gray-600 dark:text-gray-300">Professional-grade theater, music rooms, and dance studios for artistic expression.</p> |
| </div> |
| </div> |
| |
| |
| <div class="hidden md:flex items-center"> |
| <div class="relative w-full h-full"> |
| <img src="https://images.unsplash.com/photo-1571260899304-425eee4c7efc?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="School Campus" class="w-full h-full object-cover rounded-xl shadow-xl"> |
| <div class="absolute -bottom-4 -left-4 w-20 h-20 bg-primary rounded-xl flex items-center justify-center text-white shadow-lg"> |
| <i class="fas fa-medal text-3xl"></i> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="space-y-8"> |
| <div class="bg-white dark:bg-dark-800 p-8 rounded-xl shadow-lg"> |
| <div class="text-primary mb-4"> |
| <i class="fas fa-book-open text-3xl"></i> |
| </div> |
| <h3 class="text-xl font-semibold mb-3">Digital Library</h3> |
| <p class="text-gray-600 dark:text-gray-300">Extensive collection of physical and digital resources with quiet study spaces.</p> |
| </div> |
| <div class="bg-white dark:bg-dark-800 p-8 rounded-xl shadow-lg"> |
| <div class="text-primary mb-4"> |
| <i class="fas fa-running text-3xl"></i> |
| </div> |
| <h3 class="text-xl font-semibold mb-3">Sports Complex</h3> |
| <p class="text-gray-600 dark:text-gray-300">Olympic-sized swimming pool, gymnasium, track & field, and multiple outdoor courts.</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-20 bg-gray-100 dark:bg-dark-800 wavy-top"> |
| <div class="container mx-auto px-6"> |
| <div class="text-center mb-16"> |
| <h2 class="text-3xl md:text-4xl font-heading font-bold mb-4">Latest <span class="text-primary">News & Events</span></h2> |
| <p class="max-w-2xl mx-auto text-gray-600 dark:text-gray-300">Stay updated with the latest happenings at Future Academy.</p> |
| </div> |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
| |
| <div class="bg-white dark:bg-dark-700 rounded-xl overflow-hidden shadow-lg transition-all duration-300 hover:shadow-xl"> |
| <div class="h-48 overflow-hidden"> |
| <img src="https://images.unsplash.com/photo-1588072432836-e10032774350?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="Robotics Competition" class="w-full h-full object-cover transition-transform duration-500 hover:scale-110"> |
| </div> |
| <div class="p-6"> |
| <div class="flex items-center text-sm text-gray-500 dark:text-gray-400 mb-2"> |
| <i class="fas fa-calendar-alt mr-2"></i> |
| <span>June 15, 2023</span> |
| </div> |
| <h3 class="text-xl font-semibold mb-3">Robotics Team Wins National Championship</h3> |
| <p class="text-gray-600 dark:text-gray-300 mb-4">Our high school robotics team secured first place in the national competition with their innovative design.</p> |
| <a href="#" class="text-primary font-medium flex items-center">Read More <i class="fas fa-arrow-right ml-2"></i></a> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white dark:bg-dark-700 rounded-xl overflow-hidden shadow-lg transition-all duration-300 hover:shadow-xl"> |
| <div class="h-48 overflow-hidden"> |
| <img src="https://images.unsplash.com/photo-1541178735493-479c1a27ed24?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="New Science Wing" class="w-full h-full object-cover transition-transform duration-500 hover:scale-110"> |
| </div> |
| <div class="p-6"> |
| <div class="flex items-center text-sm text-gray-500 dark:text-gray-400 mb-2"> |
| <i class="fas fa-calendar-alt mr-2"></i> |
| <span>May 28, 2023</span> |
| </div> |
| <h3 class="text-xl font-semibold mb-3">New Science Wing Grand Opening</h3> |
| <p class="text-gray-600 dark:text-gray-300 mb-4">Our state-of-the-art science facility is now open, featuring advanced labs and interactive learning spaces.</p> |
| <a href="#" class="text-primary font-medium flex items-center">Read More <i class="fas fa-arrow-right ml-2"></i></a> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white dark:bg-dark-700 rounded-xl overflow-hidden shadow-lg transition-all duration-300 hover:shadow-xl"> |
| <div class="h-48 overflow-hidden"> |
| <img src="https://images.unsplash.com/photo-1511632765486-a01980e01a18?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="Summer Program" class="w-full h-full object-cover transition-transform duration-500 hover:scale-110"> |
| </div> |
| <div class="p-6"> |
| <div class="flex items-center text-sm text-gray-500 dark:text-gray-400 mb-2"> |
| <i class="fas fa-calendar-alt mr-2"></i> |
| <span>May 12, 2023</span> |
| </div> |
| <h3 class="text-xl font-semibold mb-3">Summer Enrichment Program Registration</h3> |
| <p class="text-gray-600 dark:text-gray-300 mb-4">Registration is now open for our popular summer programs in STEM, arts, and sports.</p> |
| <a href="#" class="text-primary font-medium flex items-center">Read More <i class="fas fa-arrow-right ml-2"></i></a> |
| </div> |
| </div> |
| </div> |
| <div class="text-center mt-12"> |
| <button class="px-6 py-3 bg-primary hover:bg-yellow-600 text-white font-medium rounded-lg transition-colors shadow-lg">View All News</button> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-20 wavy-bg"> |
| <div class="container mx-auto px-6"> |
| <div class="text-center mb-16"> |
| <h2 class="text-3xl md:text-4xl font-heading font-bold mb-4">What <span class="text-primary">Parents Say</span></h2> |
| <p class="max-w-2xl mx-auto text-gray-600 dark:text-gray-300">Hear from our community about their experiences at Future Academy.</p> |
| </div> |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
| |
| <div class="bg-white dark:bg-dark-800 p-8 rounded-xl shadow-lg"> |
| <div class="flex items-center mb-4"> |
| <div class="text-primary text-2xl mr-2"> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| </div> |
| </div> |
| <p class="text-gray-600 dark:text-gray-300 italic mb-6">"The personalized approach to learning has made all the difference for my son. He's more engaged and excited about school than ever before."</p> |
| <div class="flex items-center"> |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Sarah Johnson" class="w-12 h-12 rounded-full mr-4"> |
| <div> |
| <h4 class="font-semibold">Sarah Johnson</h4> |
| <p class="text-sm text-gray-500 dark:text-gray-400">Parent of 3rd Grader</p> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white dark:bg-dark-800 p-8 rounded-xl shadow-lg"> |
| <div class="flex items-center mb-4"> |
| <div class="text-primary text-2xl mr-2"> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| </div> |
| </div> |
| <p class="text-gray-600 dark:text-gray-300 italic mb-6">"The STEM program is exceptional. My daughter is already learning coding concepts in 5th grade that I didn't encounter until college!"</p> |
| <div class="flex items-center"> |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Michael Chen" class="w-12 h-12 rounded-full mr-4"> |
| <div> |
| <h4 class="font-semibold">Michael Chen</h4> |
| <p class="text-sm text-gray-500 dark:text-gray-400">Parent of 5th Grader</p> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white dark:bg-dark-800 p-8 rounded-xl shadow-lg"> |
| <div class="flex items-center mb-4"> |
| <div class="text-primary text-2xl mr-2"> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star-half-alt"></i> |
| </div> |
| </div> |
| <p class="text-gray-600 dark:text-gray-300 italic mb-6">"The communication from teachers and administration is outstanding. We feel like true partners in our child's education."</p> |
| <div class="flex items-center"> |
| <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Elena Rodriguez" class="w-12 h-12 rounded-full mr-4"> |
| <div> |
| <h4 class="font-semibold">Elena Rodriguez</h4> |
| <p class="text-sm text-gray-500 dark:text-gray-400">Parent of 8th Grader</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-20 bg-gradient-to-r from-dark-900 to-dark-800 text-white"> |
| <div class="container mx-auto px-6 text-center"> |
| <h2 class="text-3xl md:text-4xl font-heading font-bold mb-6">Ready to Join the <span class="text-primary">Future Academy</span> Family?</h2> |
| <p class="text-xl max-w-3xl mx-auto mb-8 opacity-90">The journey to your child's bright future starts here. Schedule a tour or begin the application process today.</p> |
| <div class="flex flex-wrap justify-center gap-6"> |
| <button class="px-8 py-3 bg-primary hover:bg-yellow-600 text-white font-medium rounded-lg transition-colors shadow-lg">Schedule a Tour</button> |
| <button class="px-8 py-3 bg-white hover:bg-gray-100 text-gray-800 font-medium rounded-lg transition-colors shadow-lg">Apply Now</button> |
| </div> |
| <div class="mt-8 text-gray-300 text-sm flex flex-wrap justify-center gap-6"> |
| <span class="flex items-center"><i class="fas fa-phone-alt mr-2"></i> (555) 123-4567</span> |
| <span class="flex items-center"><i class="fas fa-envelope mr-2"></i> admissions@futureacademy.edu</span> |
| <span class="flex items-center"><i class="fas fa-map-marker-alt mr-2"></i> 123 Education Ave, Future City, FC 12345</span> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <footer class="bg-gray-100 dark:bg-dark-900 text-gray-600 dark:text-gray-400"> |
| <div class="container mx-auto px-6 py-12"> |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12"> |
| |
| <div> |
| <div class="flex items-center mb-4"> |
| <div class="w-10 h-10 bg-primary rounded-full flex items-center justify-center mr-3"> |
| <i class="fas fa-graduation-cap text-white text-xl"></i> |
| </div> |
| <span class="text-xl font-heading font-bold dark:text-white">Future<span class="text-primary">Academy</span></span> |
| </div> |
| <p class="mb-4">Innovative education for tomorrow's leaders, thinkers, and creators since 2010.</p> |
| <div class="flex space-x-4"> |
| <a href="#" class="text-gray-500 dark:text-gray-400 hover:text-primary transition-colors"><i class="fab fa-facebook-f"></i></a> |
| <a href="#" class="text-gray-500 dark:text-gray-400 hover:text-primary transition-colors"><i class="fab fa-twitter"></i></a> |
| <a href="#" class="text-gray-500 dark:text-gray-400 hover:text-primary transition-colors"><i class="fab fa-instagram"></i></a> |
| <a href="#" class="text-gray-500 dark:text-gray-400 hover:text-primary transition-colors"><i class="fab fa-linkedin-in"></i></a> |
| <a href="#" class="text-gray-500 dark:text-gray-400 hover:text-primary transition-colors"><i class="fab fa-youtube"></i></a> |
| </div> |
| </div> |
| |
| |
| <div> |
| <h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-4">Quick Links</h3> |
| <ul class="space-y-2"> |
| <li><a href="#" class="hover:text-primary transition-colors">About Us</a></li> |
| <li><a href="#" class="hover:text-primary transition-colors">Admissions</a></li> |
| <li><a href="#" class="hover:text-primary transition-colors">Academics</a></li> |
| <li><a href="#" class="hover:text-primary transition-colors">Student Life</a></li> |
| <li><a href="#" class="hover:text-primary transition-colors">News & Events</a></li> |
| <li><a href="#" class="hover:text-primary transition-colors">Contact Us</a></li> |
| </ul> |
| </div> |
| |
| |
| <div> |
| <h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-4">Contact Info</h3> |
| <ul class="space-y-3"> |
| <li class="flex items-start"> |
| <i class="fas fa-map-marker-alt mt-1 mr-3 text-primary"></i> |
| <span>123 Education Avenue, Future City, FC 12345</span> |
| </li> |
| <li class="flex items-center"> |
| <i class="fas fa-phone-alt mr-3 text-primary"></i> |
| <span>Phone: (555) 123-4567</span> |
| </li> |
| <li class="flex items-center"> |
| <i class="fas fa-envelope mr-3 text-primary"></i> |
| <span>Email: info@futureacademy.edu</span> |
| </li> |
| <li class="flex items-center"> |
| <i class="fas fa-clock mr-3 text-primary"></i> |
| <span>Hours: Mon-Fri, 8:00 AM – 5:00 PM</span> |
| </li> |
| </ul> |
| </div> |
| |
| |
| <div> |
| <h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-4">Newsletter</h3> |
| <p class="mb-4">Subscribe to our newsletter to receive updates about our programs and events.</p> |
| <form class="mb-4"> |
| <div class="flex"> |
| <input type="email" placeholder="Your email" class="px-4 py-2 w-full rounded-l-lg focus:outline-none focus:ring-2 focus:ring-primary"> |
| <button type="submit" class="bg-primary text-white px-4 py-2 rounded-r-lg hover:bg-yellow-600 transition-colors"> |
| <i class="fas fa-paper-plane"></i> |
| </button> |
| </div> |
| </form> |
| <p class="text-sm">We respect your privacy. Unsubscribe at any time.</p> |
| </div> |
| </div> |
| |
| |
| <div class="border-t border-gray-200 dark:border-dark-700 mt-12 pt-8 text-center"> |
| <p>© 2023 Future Academy. All rights reserved. Designed with <i class="fas fa-heart text-red-500"></i> for education.</p> |
| </div> |
| </div> |
| </footer> |
|
|
| <script> |
| |
| let currentSlide = 0; |
| const slides = document.querySelectorAll('.slide'); |
| |
| function changeSlide(index) { |
| slides[currentSlide].classList.remove('active'); |
| currentSlide = index; |
| slides[currentSlide].classList.add('active'); |
| } |
| |
| function nextSlide() { |
| const nextIndex = (currentSlide + 1) % slides.length; |
| changeSlide(nextIndex); |
| } |
| |
| |
| setInterval(nextSlide, 5000); |
| |
| |
| function handleScroll() { |
| const nav = document.querySelector('.sticky-nav'); |
| const windowScroll = window.scrollY; |
| |
| if (windowScroll > 50) { |
| nav.classList.add('nav-scrolled'); |
| } else { |
| nav.classList.remove('nav-scrolled'); |
| } |
| } |
| |
| |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
| anchor.addEventListener('click', function (e) { |
| e.preventDefault(); |
| |
| const targetId = this.getAttribute('href'); |
| if (targetId === '#') return; |
| |
| const targetElement = document.querySelector(targetId); |
| if (targetElement) { |
| window.scrollTo({ |
| top: targetElement.offsetTop - 100, |
| behavior: 'smooth' |
| }); |
| } |
| }); |
| }); |
| |
| |
| document.addEventListener('alpine:init', () => { |
| Alpine.data('app', () => ({ |
| windowScroll: 0, |
| handleScroll() { |
| this.windowScroll = window.scrollY; |
| } |
| })); |
| }); |
| </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=tareqalqadi/school3" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p><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=vortexaistudio/vortexaistudioacademy" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
