Download Template HTML Free : School (Bright Stars Academy)
gudanginformatika
128 x views • 1 year ago
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bright Stars Academy - Quality Education for Future Leaders</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">
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
body {
font-family: 'Poppins', sans-serif;
}
/* Animation for hero section */
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.fade-in {
animation: fadeIn 1s ease-out forwards;
}
/* Custom underline for headings */
.heading-underline::after {
content: '';
display: block;
width: 60px;
height: 3px;
background: #3b82f6;
margin: 10px auto;
}
/* Hover effect for cards */
.feature-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}
</style>
</head>
<body class="bg-gray-50">
<!-- Header/Navigation -->
<header class="bg-white shadow-sm sticky top-0 z-50">
<div class="container mx-auto px-4 py-3 flex justify-between items-center">
<div class="flex items-center">
<div class="w-12 h-12 bg-blue-600 rounded-full flex items-center justify-center text-white font-bold text-xl mr-3">
BSA
</div>
<h1 class="text-xl font-bold text-gray-800">Bright Stars Academy</h1>
</div>
<nav class="hidden md:flex space-x-8">
<a href="#home" class="text-gray-700 hover:text-blue-600 font-medium">Home</a>
<a href="#about" class="text-gray-700 hover:text-blue-600 font-medium">About</a>
<a href="#features" class="text-gray-700 hover:text-blue-600 font-medium">Programs</a>
<a href="#gallery" class="text-gray-700 hover:text-blue-600 font-medium">Gallery</a>
<a href="#contact" class="text-gray-700 hover:text-blue-600 font-medium">Contact</a>
</nav>
<div class="md:hidden">
<button id="menu-toggle" class="text-gray-700 focus:outline-none">
<i class="fas fa-bars text-2xl"></i>
</button>
</div>
</div>
<!-- Mobile Menu -->
<div id="mobile-menu" class="hidden md:hidden bg-white py-4 px-4 shadow-lg">
<div class="flex flex-col space-y-3">
<a href="#home" class="text-gray-700 hover:text-blue-600 font-medium">Home</a>
<a href="#about" class="text-gray-700 hover:text-blue-600 font-medium">About</a>
<a href="#features" class="text-gray-700 hover:text-blue-600 font-medium">Programs</a>
<a href="#gallery" class="text-gray-700 hover:text-blue-600 font-medium">Gallery</a>
<a href="#contact" class="text-gray-700 hover:text-blue-600 font-medium">Contact</a>
</div>
</div>
</header>
<!-- Hero Section -->
<section id="home" class="relative bg-blue-700 text-white py-20 md:py-32">
<div class="absolute inset-0 bg-black opacity-50"></div>
<div class="container mx-auto px-4 relative z-10">
<div class="max-w-3xl mx-auto text-center fade-in">
<h1 class="text-4xl md:text-5xl font-bold mb-6">Shaping Future Leaders Through Quality Education</h1>
<p class="text-xl md:text-2xl mb-8">Enroll your child at Bright Stars Academy where we nurture talents, inspire creativity and build character.</p>
<div class="flex flex-col sm:flex-row justify-center gap-4">
<a href="#contact" class="bg-white text-blue-700 font-semibold py-3 px-6 rounded-lg hover:bg-blue-100 transition duration-300">Enroll Now</a>
<a href="#features" class="border-2 border-white text-white font-semibold py-3 px-6 rounded-lg hover:bg-white hover:text-blue-700 transition duration-300">Our Programs</a>
</div>
</div>
</div>
</section>
<!-- About Section -->
<section id="about" class="py-16 bg-white">
<div class="container mx-auto px-4">
<div class="text-center mb-16">
<h2 class="text-3xl font-bold text-gray-800 heading-underline">About Our School</h2>
<p class="mt-4 text-gray-600 max-w-2xl mx-auto">Established in 2005, Bright Stars Academy has been providing exceptional education to children in our community.</p>
</div>
<div class="grid md:grid-cols-3 gap-8">
<div class="bg-white p-8 rounded-lg shadow-md text-center fade-in">
<div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
<i class="fas fa-book text-blue-600 text-2xl"></i>
</div>
<h3 class="text-xl font-semibold mb-3">Our Mission</h3>
<p class="text-gray-600">To provide an inclusive learning environment that empowers students to reach their full potential academically, socially and emotionally.</p>
</div>
<div class="bg-white p-8 rounded-lg shadow-md text-center fade-in">
<div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
<i class="fas fa-eye text-blue-600 text-2xl"></i>
</div>
<h3 class="text-xl font-semibold mb-3">Our Vision</h3>
<p class="text-gray-600">To be a leading institution that produces well-rounded individuals ready to tackle global challenges and contribute positively to society.</p>
</div>
<div class="bg-white p-8 rounded-lg shadow-md text-center fade-in">
<div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
<i class="fas fa-gem text-blue-600 text-2xl"></i>
</div>
<h3 class="text-xl font-semibold mb-3">Our Values</h3>
<p class="text-gray-600">Excellence, Integrity, Diversity, Innovation, and Community - these core values guide everything we do at Bright Stars Academy.</p>
</div>
</div>
<div class="mt-16 grid md:grid-cols-2 gap-8 items-center">
<div>
<h3 class="text-2xl font-bold text-gray-800 mb-4">Why Choose Bright Stars Academy?</h3>
<p class="text-gray-600 mb-4">At Bright Stars, we go beyond academics. We focus on developing the whole child through a balanced approach to education that includes:</p>
<ul class="space-y-2">
<li class="flex items-start">
<i class="fas fa-check text-green-500 mt-1 mr-2"></i>
<span class="text-gray-700">Highly qualified and passionate teachers</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-green-500 mt-1 mr-2"></i>
<span class="text-gray-700">Small class sizes for individualized attention</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-green-500 mt-1 mr-2"></i>
<span class="text-gray-700">State-of-the-art facilities and technology</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-green-500 mt-1 mr-2"></i>
<span class="text-gray-700">Comprehensive extracurricular programs</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-green-500 mt-1 mr-2"></i>
<span class="text-gray-700">Safe and nurturing environment</span>
</li>
</ul>
</div>
<div class="rounded-lg overflow-hidden shadow-lg fade-in">
<img src="https://images.unsplash.com/photo-1606761568499-6d2451b23c66?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Students learning in classroom" class="w-full h-auto">
</div>
</div>
</div>
</section>
<!-- Features/Programs Section -->
<section id="features" class="py-16 bg-gray-50">
<div class="container mx-auto px-4">
<div class="text-center mb-16">
<h2 class="text-3xl font-bold text-gray-800 heading-underline">Our Educational Programs</h2>
<p class="mt-4 text-gray-600 max-w-2xl mx-auto">We offer a comprehensive curriculum designed to meet the needs of students at all levels.</p>
</div>
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
<div class="bg-white p-8 rounded-lg shadow-md feature-card">
<div class="w-14 h-14 bg-blue-600 rounded-full flex items-center justify-center text-white text-2xl mb-5">
<i class="fas fa-pencil-alt"></i>
</div>
<h3 class="text-xl font-semibold mb-3">Early Childhood</h3>
<p class="text-gray-600 mb-4">Our kindergarten program focuses on developing foundational skills through play-based learning and creative activities.</p>
<ul class="text-sm text-gray-600 space-y-2 mb-4">
<li class="flex items-start">
<i class="fas fa-check text-blue-500 mt-1 mr-2 text-xs"></i>
<span>Age 3-5 years</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-blue-500 mt-1 mr-2 text-xs"></i>
<span>Full-day program available</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-blue-500 mt-1 mr-2 text-xs"></i>
<span>Focus on social-emotional development</span>
</li>
</ul>
</div>
<div class="bg-white p-8 rounded-lg shadow-md feature-card">
<div class="w-14 h-14 bg-blue-600 rounded-full flex items-center justify-center text-white text-2xl mb-5">
<i class="fas fa-calculator"></i>
</div>
<h3 class="text-xl font-semibold mb-3">Elementary School</h3>
<p class="text-gray-600 mb-4">Grades 1-6 with a strong emphasis on literacy, numeracy, science, and character development.</p>
<ul class="text-sm text-gray-600 space-y-2 mb-4">
<li class="flex items-start">
<i class="fas fa-check text-blue-500 mt-1 mr-2 text-xs"></i>
<span>Age 6-11 years</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-blue-500 mt-1 mr-2 text-xs"></i>
<span>STEAM integrated curriculum</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-blue-500 mt-1 mr-2 text-xs"></i>
<span>After-school clubs available</span>
</li>
</ul>
</div>
<div class="bg-white p-8 rounded-lg shadow-md feature-card">
<div class="w-14 h-14 bg-blue-600 rounded-full flex items-center justify-center text-white text-2xl mb-5">
<i class="fas fa-flask"></i>
</div>
<h3 class="text-xl font-semibold mb-3">Middle School</h3>
<p class="text-gray-600 mb-4">Grades 7-9 preparing students for high school with advanced coursework and leadership opportunities.</p>
<ul class="text-sm text-gray-600 space-y-2 mb-4">
<li class="flex items-start">
<i class="fas fa-check text-blue-500 mt-1 mr-2 text-xs"></i>
<span>Age 12-14 years</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-blue-500 mt-1 mr-2 text-xs"></i>
<span>Elective courses available</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-blue-500 mt-1 mr-2 text-xs"></i>
<span>College prep guidance</span>
</li>
</ul>
</div>
<div class="bg-white p-8 rounded-lg shadow-md feature-card">
<div class="w-14 h-14 bg-blue-600 rounded-full flex items-center justify-center text-white text-2xl mb-5">
<i class="fas fa-microscope"></i>
</div>
<h3 class="text-xl font-semibold mb-3">High School</h3>
<p class="text-gray-600 mb-4">Grades 10-12 with honors/AP courses, career counseling, and competitive sports programs.</p>
<ul class="text-sm text-gray-600 space-y-2 mb-4">
<li class="flex items-start">
<i class="fas fa-check text-blue-500 mt-1 mr-2 text-xs"></i>
<span>Age 15-18 years</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-blue-500 mt-1 mr-2 text-xs"></i>
<span>Dual enrollment options</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-blue-500 mt-1 mr-2 text-xs"></i>
<span>Internship opportunities</span>
</li>
</ul>
</div>
<div class="bg-white p-8 rounded-lg shadow-md feature-card">
<div class="w-14 h-14 bg-blue-600 rounded-full flex items-center justify-center text-white text-2xl mb-5">
<i class="fas fa-paint-brush"></i>
</div>
<h3 class="text-xl font-semibold mb-3">Art & Music</h3>
<p class="text-gray-600 mb-4">Comprehensive arts education including visual arts, theater, choir, band and music composition.</p>
<ul class="text-sm text-gray-600 space-y-2 mb-4">
<li class="flex items-start">
<i class="fas fa-check text-blue-500 mt-1 mr-2 text-xs"></i>
<span>All grade levels</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-blue-500 mt-1 mr-2 text-xs"></i>
<span>Annual art exhibitions</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-blue-500 mt-1 mr-2 text-xs"></i>
<span>Performance opportunities</span>
</li>
</ul>
</div>
<div class="bg-white p-8 rounded-lg shadow-md feature-card">
<div class="w-14 h-14 bg-blue-600 rounded-full flex items-center justify-center text-white text-2xl mb-5">
<i class="fas fa-running"></i>
</div>
<h3 class="text-xl font-semibold mb-3">Sports & Athletics</h3>
<p class="text-gray-600 mb-4">Competitive teams and recreational sports including soccer, basketball, swimming and track.</p>
<ul class="text-sm text-gray-600 space-y-2 mb-4">
<li class="flex items-start">
<i class="fas fa-check text-blue-500 mt-1 mr-2 text-xs"></i>
<span>Grades 4-12</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-blue-500 mt-1 mr-2 text-xs"></i>
<span>State-of-the-art facilities</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-blue-500 mt-1 mr-2 text-xs"></i>
<span>Qualified coaches</span>
</li>
</ul>
</div>
</div>
</div>
</section>
<!-- Stats Section -->
<section class="py-12 bg-blue-700 text-white">
<div class="container mx-auto px-4">
<div class="grid md:grid-cols-4 gap-8 text-center">
<div class="fade-in">
<h3 class="text-4xl font-bold mb-2">98%</h3>
<p class="text-gray-200">Graduation Rate</p>
</div>
<div class="fade-in">
<h3 class="text-4xl font-bold mb-2">22:1</h3>
<p class="text-gray-200">Student-Teacher Ratio</p>
</div>
<div class="fade-in">
<h3 class="text-4xl font-bold mb-2">15+</h3>
<p class="text-gray-200">Extracurricular Activities</p>
</div>
<div class="fade-in">
<h3 class="text-4xl font-bold mb-2">100%</h3>
<p class="text-gray-200">College Acceptance</p>
</div>
</div>
</div>
</section>
<!-- Gallery Section -->
<section id="gallery" class="py-16 bg-white">
<div class="container mx-auto px-4">
<div class="text-center mb-16">
<h2 class="text-3xl font-bold text-gray-800 heading-underline">School Life Gallery</h2>
<p class="mt-4 text-gray-600 max-w-2xl mx-auto">Take a glimpse into daily life at Bright Stars Academy</p>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
<div class="overflow-hidden rounded-lg">
<img src="https://images.unsplash.com/photo-1523050854058-8df90110c9f1?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Students at graduation" class="w-full h-64 object-cover hover:scale-105 transition duration-500 cursor-pointer">
</div>
<div class="overflow-hidden rounded-lg">
<img src="https://images.unsplash.com/photo-1588072432836-e10032774350?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Science class" class="w-full h-64 object-cover hover:scale-105 transition duration-500 cursor-pointer">
</div>
<div class="overflow-hidden rounded-lg">
<img src="https://images.unsplash.com/photo-1434030216411-0b793f4b4173?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&query=80" alt="Music class" class="w-full h-64 object-cover hover:scale-105 transition duration-500 cursor-pointer">
</div>
<div class="overflow-hidden rounded-lg">
<img src="https://images.unsplash.com/photo-1541178735493-479c1a27ed24?ixlib=rb-1.2.1&auto=format&fit=crop&w=1351&q=80" alt="Kids playing" class="w-full h-64 object-cover hover:scale-105 transition duration-500 cursor-pointer">
</div>
<div class="overflow-hidden rounded-lg">
<img src="https://images.unsplash.com/photo-1415795854641-f4a487a0fdc8?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Sports event" class="w-full h-64 object-cover hover:scale-105 transition duration-500 cursor-pointer">
</div>
<div class="overflow-hidden rounded-lg">
<img src="https://images.unsplash.com/photo-1588072432706-4f953dd7f4ed?ixlib=rb-1.2.1&auto=format&fit=crop&w=1351&q=80" alt="Art exhibition" class="w-full h-64 object-cover hover:scale-105 transition duration-500 cursor-pointer">
</div>
</div>
<div class="text-center mt-10">
<a href="#" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700">
View More Photos
<i class="fas fa-arrow-right ml-2"></i>
</a>
</div>
</div>
</section>
<!-- Testimonials -->
<section class="py-16 bg-gray-50">
<div class="container mx-auto px-4">
<div class="text-center mb-16">
<h2 class="text-3xl font-bold text-gray-800 heading-underline">What Parents & Students Say</h2>
</div>
<div class="grid md:grid-cols-3 gap-8">
<div class="bg-white p-8 rounded-lg shadow">
<div class="flex items-center mb-4">
<div class="w-12 h-12 rounded-full overflow-hidden mr-4">
<img src="https://randomuser.me/api/portraits/women/32.jpg" alt="Parent testimonial" class="w-full h-full object-cover">
</div>
<div>
<h4 class="font-semibold">Sarah Johnson</h4>
<p class="text-gray-500 text-sm">Parent of 2nd Grader</p>
</div>
</div>
<p class="text-gray-600">"Bright Stars has been wonderful for my daughter. She's developed confidence in her abilities and looks forward to school every day. The teachers truly care about each student's success."</p>
<div class="flex mt-3 text-yellow-400">
<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>
<div class="bg-white p-8 rounded-lg shadow">
<div class="flex items-center mb-4">
<div class="w-12 h-12 rounded-full overflow-hidden mr-4">
<img src="https://randomuser.me/api/portraits/men/45.jpg" alt="Student testimonial" class="w-full h-full object-cover">
</div>
<div>
<h4 class="font-semibold">Michael Chen</h4>
<p class="text-gray-500 text-sm">High School Senior</p>
</div>
</div>
<p class="text-gray-600">"Being at Bright Stars has opened so many opportunities for me. The college prep program helped me get into my dream university. I'm grateful for the support from all my teachers."</p>
<div class="flex mt-3 text-yellow-400">
<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>
<div class="bg-white p-8 rounded-lg shadow">
<div class="flex items-center mb-4">
<div class="w-12 h-12 rounded-full overflow-hidden mr-4">
<img src="https://randomuser.me/api/portraits/women/65.jpg" alt="Parent testimonial" class="w-full h-full object-cover">
</div>
<div>
<h4 class="font-semibold">David Martinez</h4>
<p class="text-gray-500 text-sm">Middle School Parent</p>
</div>
</div>
<p class="text-gray-600">"The school's focus on STEM education is impressive. My son has developed a passion for robotics thanks to the extracurricular programs. The facilities are top-notch and the staff is dedicated."</p>
<div class="flex mt-3 text-yellow-400">
<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>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="py-16 bg-white">
<div class="container mx-auto px-4">
<div class="max-w-4xl mx-auto">
<div class="text-center mb-16">
<h2 class="text-3xl font-bold text-gray-800 heading-underline">Contact Us</h2>
<p class="mt-4 text-gray-600 max-w-2xl mx-auto">Have questions? We're here to help. Reach out to schedule a tour or learn more about enrollment.</p>
</div>
<div class="grid md:grid-cols-2 gap-12">
<div>
<h3 class="text-xl font-semibold mb-4">School Information</h3>
<div class="space-y-4">
<div class="flex items-start">
<div class="flex-shrink-0 text-blue-600 mr-3 mt-1">
<i class="fas fa-map-marker-alt"></i>
</div>
<div>
<h4 class="font-medium">Address</h4>
<p class="text-gray-600">123 Education Avenue<br>Learning City, LC 98765</p>
</div>
</div>
<div class="flex items-start">
<div class="flex-shrink-0 text-blue-600 mr-3 mt-1">
<i class="fas fa-phone"></i>
</div>
<div>
<h4 class="font-medium">Phone</h4>
<p class="text-gray-600">(123) 456-7890<br>Mon-Fri, 8:00 AM - 5:00 PM</p>
</div>
</div>
<div class="flex items-start">
<div class="flex-shrink-0 text-blue-600 mr-3 mt-1">
<i class="fas fa-envelope"></i>
</div>
<div>
<h4 class="font-medium">Email</h4>
<p class="text-gray-600">[email protected]<br>[email protected]</p>
</div>
</div>
<div class="flex items-start">
<div class="flex-shrink-0 text-blue-600 mr-3 mt-1">
<i class="fas fa-clock"></i>
</div>
<div>
<h4 class="font-medium">Office Hours</h4>
<p class="text-gray-600">Monday to Friday<br>7:30 AM to 4:30 PM</p>
</div>
</div>
</div>
<div class="mt-8">
<h3 class="text-xl font-semibold mb-4">Connect With Us</h3>
<div class="flex space-x-4">
<a href="#" class="w-10 h-10 rounded-full bg-blue-600 text-white flex items-center justify-center hover:bg-blue-700">
<i class="fab fa-facebook-f"></i>
</a>
<a href="#" class="w-10 h-10 rounded-full bg-blue-400 text-white flex items-center justify-center hover:bg-blue-500">
<i class="fab fa-twitter"></i>
</a>
<a href="#" class="w-10 h-10 rounded-full bg-pink-600 text-white flex items-center justify-center hover:bg-pink-700">
<i class="fab fa-instagram"></i>
</a>
<a href="#" class="w-10 h-10 rounded-full bg-red-600 text-white flex items-center justify-center hover:bg-red-700">
<i class="fab fa-youtube"></i>
</a>
</div>
</div>
</div>
<div>
<h3 class="text-xl font-semibold mb-4">Send Us a Message</h3>
<form class="space-y-4">
<div>
<label for="name" class="block text-sm font-medium text-gray-700">Name</label>
<input type="text" id="name" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500" placeholder="Your name">
</div>
<div>
<label for="email" class="block text-sm font-medium text-gray-700">Email</label>
<input type="email" id="email" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500" placeholder="Your email">
</div>
<div>
<label for="phone" class="block text-sm font-medium text-gray-700">Phone</label>
<input type="tel" id="phone" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500" placeholder="Your phone number">
</div>
<div>
<label for="subject" class="block text-sm font-medium text-gray-700">Subject</label>
<select id="subject" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500">
<option value="">Select a subject</option>
<option value="admissions">Admissions Inquiry</option>
<option value="tour">Schedule a Tour</option>
<option value="general">General Question</option>
<option value="feedback">Feedback/Suggestion</option>
</select>
</div>
<div>
<label for="message" class="block text-sm font-medium text-gray-700">Message</label>
<textarea id="message" rows="4" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500" placeholder="Your message"></textarea>
</div>
<button type="submit" class="w-full bg-blue-600 text-white py-3 px-4 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
Send Message
</button>
</form>
</div>
</div>
</div>
</div>
</section>
<!-- Newsletter -->
<section class="py-12 bg-blue-700 text-white">
<div class="container mx-auto px-4">
<div class="max-w-2xl mx-auto text-center">
<h3 class="text-2xl font-bold mb-4 fade-in">Stay Updated With Our School</h3>
<p class="mb-6 fade-in">Subscribe to our newsletter to receive updates about events, news, and important announcements.</p>
<form class="flex flex-col sm:flex-row gap-3 fade-in">
<input type="email" placeholder="Your email address" class="flex-grow px-4 py-3 rounded-md text-gray-900 focus:outline-none focus:ring-2 focus:ring-blue-500">
<button type="submit" class="bg-white text-blue-700 font-semibold px-6 py-3 rounded-md hover:bg-blue-100 transition duration-300 whitespace-nowrap">
Subscribe Now
</button>
</form>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-gray-800 text-white py-12">
<div class="container mx-auto px-4">
<div class="grid md:grid-cols-4 gap-8">
<div>
<div class="flex items-center mb-4">
<div class="w-10 h-10 bg-blue-600 rounded-full flex items-center justify-center text-white font-bold text-sm mr-3">
BSA
</div>
<h3 class="text-xl font-bold">Bright Stars Academy</h3>
</div>
<p class="text-gray-400">Providing exceptional education since 2005. Nurturing minds, building character, and shaping futures.</p>
<div class="mt-4 flex space-x-3">
<a href="#" class="text-gray-400 hover:text-white">
<i class="fab fa-facebook-f"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white">
<i class="fab fa-twitter"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white">
<i class="fab fa-instagram"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white">
<i class="fab fa-youtube"></i>
</a>
</div>
</div>
<div>
<h4 class="text-lg font-semibold mb-4">Quick Links</h4>
<ul class="space-y-2">
<li><a href="#home" class="text-gray-400 hover:text-white">Home</a></li>
<li><a href="#about" class="text-gray-400 hover:text-white">About Us</a></li>
<li><a href="#features" class="text-gray-400 hover:text-white">Academic Programs</a></li>
<li><a href="#gallery" class="text-gray-400 hover:text-white">Photo Gallery</a></li>
<li><a href="#contact" class="text-gray-400 hover:text-white">Contact Us</a></li>
</ul>
</div>
<div>
<h4 class="text-lg font-semibold mb-4">Academics</h4>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white">Curriculum</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Academic Calendar</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">School Policies</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Field Trips</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Student Resources</a></li>
</ul>
</div>
<div>
<h4 class="text-lg font-semibold mb-4">Support</h4>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white">FAQ</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Parent Portal</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Tuition & Financial Aid</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Employment</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Site Map</a></li>
</ul>
</div>
</div>
<div class="border-t border-gray-700 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
<p class="text-gray-400 text-sm mb-4 md:mb-0">© 2023 Bright Stars Academy. All rights reserved.</p>
<div class="flex space-x-6">
<a href="#" class="text-gray-400 hover:text-white text-sm">Privacy Policy</a>
<a href="#" class="text-gray-400 hover:text-white text-sm">Terms of Service</a>
<a href="#" class="text-gray-400 hover:text-white text-sm">Accessibility</a>
</div>
</div>
</div>
</footer>
<!-- Back to Top Button -->
<button id="back-to-top" class="fixed bottom-6 right-6 w-12 h-12 bg-blue-600 text-white rounded-full shadow-lg hidden items-center justify-center hover:bg-blue-700 transition duration-300">
<i class="fas fa-arrow-up"></i>
</button>
<script>
// Mobile Menu Toggle
document.getElementById('menu-toggle').addEventListener('click', function() {
const menu = document.getElementById('mobile-menu');
menu.classList.toggle('hidden');
});
// Back to Top Button
const backToTopButton = document.getElementById('back-to-top');
window.addEventListener('scroll', function() {
if (window.pageYOffset > 300) {
backToTopButton.classList.remove('hidden');
backToTopButton.classList.add('flex');
} else {
backToTopButton.classList.add('hidden');
backToTopButton.classList.remove('flex');
}
});
backToTopButton.addEventListener('click', function() {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
});
// Smooth scrolling for anchor links
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) {
targetElement.scrollIntoView({
behavior: 'smooth'
});
}
});
});
// Add fade-in animation as elements come into view
const fadeElements = document.querySelectorAll('.fade-in');
const fadeInObserver = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.style.opacity = 1;
entry.target.style.transform = 'translateY(0)';
}
});
}, { threshold: 0.1 });
fadeElements.forEach(element => {
element.style.opacity = 0;
element.style.transform = 'translateY(20px)';
element.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
fadeInObserver.observe(element);
});
</script>
</body>
</html>
