Style.

css

@import url('https://fonts.googleapis.com/css2?
family=Playfair+Display:wght@700&family=Roboto:wght@300;400;500&display=swap');

/* --- Root Variables --- */

:root {

--primary-color: #0B0C10;

--secondary-color: #1F2833;

--accent-color: #66FCF1;

--text-color: #C5C6C7;

--dark-accent: #45A29E;

--gold-accent: #C07F00; /* A secondary, luxurious accent */

--font-primary: 'Playfair Display', serif;

--font-secondary: 'Roboto', sans-serif;

--header-height: 80px;

/* --- Global Styles --- */

*{

margin: 0;

padding: 0;

box-sizing: border-box;

}
html {

scroll-behavior: smooth;

font-size: 16px;

body {

font-family: var(--font-secondary);

background-color: var(--primary-color);

color: var(--text-color);

line-height: 1.8;

.container {

max-width: 1200px;

margin: 0 auto;

padding: 0 2rem;

img {

max-width: 100%;

height: auto;

border-radius: 8px;

a{
 color: var(--accent-color);

text-decoration: none;

transition: color 0.3s ease;

a:hover {

color: white;

h1, h2, h3, h4 {

font-family: var(--font-primary);

color: white;

line-height: 1.3;

h2 {

font-size: 2.8rem;

color: var(--gold-accent);

text-align: center;

margin-bottom: 1rem;

h3 {

font-size: 2rem;

color: var(--accent-color);
}

p{

margin-bottom: 1rem;

font-weight: 300;

/* --- Header & Navigation --- */

.main-header {

background-color: rgba(11, 12, 16, 0.85);

padding: 0 2rem;

position: fixed;

width: 100%;

height: var(--header-height);

z-index: 1000;

backdrop-filter: blur(10px);

border-bottom: 1px solid #2a2a2a;

display: flex;

align-items: center;

.main-header .container {

display: flex;

justify-content: space-between;

align-items: center;
 width: 100%;

.logo {

font-family: var(--font-primary);

color: var(--gold-accent);

font-size: 2.2rem;

text-shadow: 1px 1px 3px rgba(0,0,0,0.5);

.main-nav {

display: flex;

.main-nav ul {

list-style: none;

display: flex;

align-items: center;

gap: 2.5rem;

.main-nav a {

color: var(--text-color);

font-size: 1rem;

font-weight: 400;
 padding-bottom: 5px;

border-bottom: 2px solid transparent;

transition: color 0.3s ease, border-bottom-color 0.3s ease;

.main-nav a:hover, .main-nav a.active {

color: var(--accent-color);

border-bottom-color: var(--accent-color);

.cta-button {

background-color: var(--gold-accent);

color: var(--primary-color) !important;

padding: 0.6rem 1.2rem;

border-radius: 5px;

font-weight: 500;

transition: background-color 0.3s ease;

border-bottom: none !important;

.cta-button:hover {

background-color: #ffae00;

color: var(--primary-color) !important;

}
.menu-toggle {

display: none;

cursor: pointer;

background: none;

border: none;

.menu-toggle .bar {

display: block;

width: 28px;

height: 3px;

margin: 5px auto;

background-color: var(--text-color);

transition: all 0.3s ease-in-out;

/* --- Page Header (for sub-pages) --- */

.page-header {

padding-top: calc(var(--header-height) + 4rem);

padding-bottom: 4rem;

background: linear-gradient(rgba(11, 12, 16, 0.8), rgba(11, 12, 16, 0.8)),

url('https://images.unsplash.com/photo-1541339907198-e08756dedf3f?q=80&w=2070') no-repeat
center center/cover;

text-align: center;

}
.page-header h1 {

font-size: 3.5rem;

color: var(--gold-accent);

.page-header p {

font-size: 1.2rem;

max-width: 600px;

margin: 1rem auto 0 auto;

/* --- General Section Styling --- */

.content-section {

padding: 5rem 0;

.dark-section {

background-color: var(--secondary-color);

.section-intro {

text-align: center;

max-width: 800px;

margin: 0 auto 4rem auto;

font-size: 1.1rem;
 color: var(--text-color);

/* --- Home Page: Hero Section --- */

#hero {

position: relative;

height: 100vh;

display: flex;

justify-content: center;

align-items: center;

text-align: center;

overflow: hidden;

#hero-video {

position: absolute;

top: 50%;

left: 50%;

width: 100%;

height: 100%;

object-fit: cover;

transform: translate(-50%, -50%);

z-index: -2;

}
#hero::before {

content: '';

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

background: rgba(11, 12, 16, 0.7);

z-index: -1;

.hero-content h2 {

font-size: 4.5rem;

margin-bottom: 1rem;

color: white;

text-shadow: 2px 2px 8px rgba(0,0,0,0.7);

/* --- Academics Page --- */

.curriculum-grid {

display: grid;

grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));

gap: 2.5rem;

.curriculum-card {
 background: var(--secondary-color);

padding: 2.5rem;

border-radius: 8px;

border-left: 5px solid var(--dark-accent);

transition: transform 0.3s ease, box-shadow 0.3s ease;

.curriculum-card:hover {

transform: translateY(-10px);

box-shadow: 0 15px 30px rgba(0,0,0,0.3);

.faculty-grid {

display: grid;

grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

gap: 2rem;

margin-top: 4rem;

.faculty-card {

background: var(--secondary-color);

border-radius: 8px;

text-align: center;

padding: 2rem;

transition: background-color 0.3s;

.faculty-card:hover {
 background-color: #2a3847;

.faculty-card img {

width: 150px;

height: 150px;

border-radius: 50%;

object-fit: cover;

border: 4px solid var(--accent-color);

margin-bottom: 1rem;

.faculty-card h4 {

font-size: 1.4rem;

color: white;

.faculty-card .title {

color: var(--gold-accent);

margin-bottom: 1rem;

/* --- Admissions Page --- */

.admissions-process {

display: flex;

justify-content: space-between;

gap: 2rem;

margin-bottom: 5rem;
}

.step {

background: var(--secondary-color);

padding: 2rem;

border-radius: 8px;

text-align: center;

flex: 1;

.step-number {

font-size: 3rem;

font-family: var(--font-primary);

color: var(--gold-accent);

margin-bottom: 1rem;

.fees-table {

width: 100%;

border-collapse: collapse;

margin: 3rem 0;

background: var(--secondary-color);

.fees-table th, .fees-table td {

padding: 1.2rem;

text-align: left;

border-bottom: 1px solid var(--primary-color);

}

.fees-table th {

background-color: var(--dark-accent);

color: white;

font-size: 1.1rem;

.fees-table td {

color: var(--text-color);

.faq-item {

background: var(--secondary-color);

margin-bottom: 1rem;

border-radius: 5px;

.faq-question {

width: 100%;

background: none;

border: none;

padding: 1.5rem;

font-size: 1.2rem;

font-weight: 500;

color: white;

text-align: left;

cursor: pointer;
 display: flex;

justify-content: space-between;

align-items: center;

.faq-question::after {

content: '+';

font-size: 2rem;

color: var(--gold-accent);

transition: transform 0.3s ease;

.faq-question.active::after {

transform: rotate(45deg);

.faq-answer {

max-height: 0;

overflow: hidden;

padding: 0 1.5rem;

transition: max-height 0.4s ease-out, padding 0.4s ease-out;

.faq-answer p {

padding-bottom: 1.5rem;

border-top: 1px solid var(--primary-color);

padding-top: 1.5rem;

}
/* --- Student Life Page --- */

.life-grid {

display: grid;

grid-template-columns: 1fr 1fr;

gap: 3rem;

align-items: center;

margin-bottom: 5rem;

.life-grid:nth-child(even) .life-image {

order: -1;

.life-text h3 {

margin-bottom: 1rem;

.clubs-grid {

display: grid;

grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

gap: 1.5rem;

.club-card {

background: var(--secondary-color);

padding: 1.5rem;

text-align: center;

border-radius: 8px;
}

.club-card .icon {

font-size: 3rem;

color: var(--accent-color);

margin-bottom: 1rem;

.club-card h4 {

color: white;

margin-bottom: 0.5rem;

/* --- Portal/Login Page --- */

.portal-container {

display: flex;

justify-content: center;

align-items: center;

min-height: 100vh;

padding: 2rem;

padding-top: var(--header-height);

.form-box {

width: 100%;

max-width: 450px;

background: var(--secondary-color);

padding: 3rem;
 border-radius: 10px;

box-shadow: 0 10px 40px rgba(0,0,0,0.5);

.form-box h2 {

text-align: center;

margin-bottom: 2rem;

.input-group {

position: relative;

margin-bottom: 2rem;

.input-group input {

width: 100%;

padding: 10px 0;

font-size: 1rem;

color: var(--text-color);

background: transparent;

border: none;

border-bottom: 2px solid #5a5a5a;

outline: none;

transition: border-color 0.3s ease;

.input-group label {

position: absolute;

top: 10px;
 left: 0;

font-size: 1rem;

color: #999;

pointer-events: none;

transition: 0.3s ease all;

.input-group input:focus {

border-bottom-color: var(--accent-color);

.input-group input:focus ~ label,

.input-group input:valid ~ label {

top: -20px;

font-size: 0.8rem;

color: var(--accent-color);

.form-btn {

width: 100%;

padding: 1rem;

border: none;

border-radius: 5px;

background-color: var(--gold-accent);

color: var(--primary-color);

font-size: 1.1rem;

font-weight: bold;

cursor: pointer;
 transition: background-color 0.3s ease;

.form-btn:hover {

background-color: #ffae00;

.form-switch-link {

text-align: center;

margin-top: 2rem;

/* --- Footer --- */

.main-footer {

background-color: #000;

padding: 3rem 0;

text-align: center;

border-top: 1px solid #2a2a2a;

.main-footer .container {

display: flex;

flex-direction: column;

align-items: center;

gap: 1.5rem;

.footer-links {

display: flex;
 gap: 2rem;

.footer-links a {

color: var(--text-color);

.footer-socials a {

font-size: 1.5rem;

margin: 0 1rem;

/* --- Responsive Design --- */

@media (max-width: 992px) {

.life-grid {

grid-template-columns: 1fr;

.life-grid:nth-child(even) .life-image {

order: 1;

.life-image {

margin-top: 2rem;

@media (max-width: 768px) {

h2 { font-size: 2.2rem; }
.hero-content h2 { font-size: 3rem; }

.menu-toggle {

display: block;

z-index: 1001;

.main-nav {

position: fixed;

top: 0;

right: 0;

width: 100%;

height: 100vh;

background: var(--primary-color);

flex-direction: column;

justify-content: center;

align-items: center;

transform: translateX(100%);

transition: transform 0.4s ease-in-out;

.main-nav.active {

transform: translateX(0);

.main-nav ul {

flex-direction: column;

gap: 3rem;
 }

.main-nav a {

font-size: 1.5rem;

.menu-toggle.active .bar:nth-child(2) {

opacity: 0;

.menu-toggle.active .bar:nth-child(1) {

transform: translateY(8px) rotate(45deg);

.menu-toggle.active .bar:nth-child(3) {

transform: translateY(-8px) rotate(-45deg);

.admissions-process {

flex-direction: column;

Script.js

document.addEventListener('DOMContentLoaded', function() {
// --- Mobile Navigation Toggle ---

const menuToggle = document.querySelector('.menu-toggle');

const mainNav = document.querySelector('.main-nav');

if (menuToggle && mainNav) {

menuToggle.addEventListener('click', () => {

menuToggle.classList.toggle('active');

mainNav.classList.toggle('active');

});

// --- Set Active Navigation Link ---

// This script will find the current page's URL and add an 'active' class

// to the corresponding link in the navigation bar.

const currentPage = window.location.pathname.split("/").pop();

const navLinks = document.querySelectorAll('.main-nav ul li a');

navLinks.forEach(link => {

const linkPage = link.getAttribute('href').split("/").pop();

// Special case for the home page (index.html or empty path)

if (linkPage === currentPage || (currentPage === '' && linkPage === 'index.html')) {

link.classList.add('active');

});
// --- FAQ Accordion Logic (for Admissions page) ---

const faqQuestions = document.querySelectorAll('.faq-question');

faqQuestions.forEach(question => {

question.addEventListener('click', () => {

const answer = question.nextElementSibling;

const isActive = question.classList.contains('active');

// Close all other answers

faqQuestions.forEach(q => {

q.classList.remove('active');

q.nextElementSibling.style.maxHeight = null;

q.nextElementSibling.style.padding = '0 1.5rem';

});

// If the clicked question was not already active, open it

if (!isActive) {

question.classList.add('active');

answer.style.padding = '0 1.5rem'; // Keep padding consistent

answer.style.maxHeight = answer.scrollHeight + "px";

});

});
 // --- Scroll Animations ---

// This creates a subtle fade-in effect for sections as you scroll down.

const observer = new IntersectionObserver((entries) => {

entries.forEach(entry => {

if (entry.isIntersecting) {

entry.target.classList.add('visible');

});

}, {

threshold: 0.1

});

// Add 'reveal' class to elements you want to animate

const elementsToAnimate = document.querySelectorAll('.content-section > .container > *, .life-grid >

div');

elementsToAnimate.forEach(el => {

el.style.opacity = '0';

el.style.transform = 'translateY(30px)';

el.style.transition = 'opacity 0.8s ease-out, transform 0.6s ease-out';

observer.observe(el);

});

// The observer callback will add the 'visible' class, triggering the transition

const styleSheet = document.createElement("style");

styleSheet.type = "text/css";
 styleSheet.innerText = `

.visible {

opacity: 1 !important;

transform: translateY(0) !important;

`;

document.head.appendChild(styleSheet);

// --- Header shadow on scroll ---

const header = document.querySelector('.main-header');

if(header) {

window.addEventListener('scroll', () => {

if (window.scrollY > 50) {

header.style.boxShadow = '0 4px 15px rgba(0,0,0,0.4)';

} else {

header.style.boxShadow = 'none';

});

});
Index.html

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Rekindle Academy - Igniting Minds, Forging Futures</title>

<link rel="icon" href="https://www.flaticon.com/svg/static/icons/svg/3565/3565914.svg"

type="image/svg+xml">

<link rel="stylesheet" href="style.css">

</head>

<body>

<header class="main-header">

<div class="container">

<a href="index.html" class="logo">Rekindle</a>

<nav class="main-nav">

<ul>

<li><a href="index.html">Home</a></li>

<li><a href="academics.html">Academics</a></li>

<li><a href="admissions.html">Admissions</a></li>

<li><a href="student-life.html">Student Life</a></li>

<li><a href="portal.html" class="cta-button">Portal</a></li>

</ul>
 </nav>

<button class="menu-toggle" aria-label="Open menu">

<span class="bar"></span>

<span class="bar"></span>

<span class="bar"></span>

</button>

</div>

</header>

<main>

<section id="hero">

<video autoplay muted loop id="hero-video">

<source src="https://assets.mixkit.co/videos/preview/mixkit-students-in-a-library-seen-from-
an-upper-floor-4223-large.mp4" type="video/mp4">

Your browser does not support the video tag.

</video>

<div class="hero-content">

<h2>Igniting Minds, Forging Futures</h2>

<p>Welcome to Rekindle Academy, where we provide a transformative education that nurtures

leaders, innovators, and compassionate global citizens.</p>

<a href="admissions.html" class="cta-button" style="padding: 1rem 2rem; font-size:

1.2rem;">Begin Your Journey</a>

</div>

</section>

<section id="about" class="content-section">

<div class="container">
 <h2>Welcome to Rekindle Academy</h2>

<p class="section-intro">Founded on the principles of excellence and innovation, Rekindle

Academy offers a holistic educational experience designed to prepare students for the challenges and
opportunities of the 21st century. We are more than just a school; we are a community dedicated to
fostering intellectual curiosity, critical thinking, and a lifelong passion for learning.</p>

<div class="life-grid">

<div class="life-text">

<h3>Our Philosophy</h3>

<p>We believe that education is a journey of discovery. Our student-centered approach

ensures that each child is seen, heard, and valued. By integrating rigorous academics with robust
programs in the arts, athletics, and technology, we empower students to explore their interests,
challenge their own limits, and grow into well-rounded individuals. Our curriculum is designed not just
to impart knowledge, but to teach students how to think, collaborate, and solve complex problems.</p>

</div>

<div class="life-image">

<img src="https://images.unsplash.com/photo-1580582932707-520aed937b7b?ixlib=rb-
4.0.3&auto=format&fit=crop&w=1932&q=80" alt="Modern School Campus">

</div>

</div>

</div>

</section>

<section id="highlights" class="content-section dark-section">

<div class="container">

<h2>Why Choose Rekindle?</h2>

<div class="curriculum-grid">

<div class="curriculum-card">

<h3>World-Class Faculty</h3>
 <p>Our educators are more than just teachers; they are mentors, researchers, and
pioneers in their fields. They are dedicated to creating an engaging and supportive learning
environment.</p>

</div>

<div class="curriculum-card">

<h3>Innovative Curriculum</h3>

<p>We offer a dynamic, forward-thinking curriculum with specialized tracks in STEM,

Humanities, and the Arts, ensuring students are prepared for top universities and future careers.</p>

</div>

<div class="curriculum-card">

<h3>Global Perspective</h3>

<p>Through exchange programs, international collaborations, and a diverse student body,

we cultivate a deep understanding and appreciation of different cultures and viewpoints.</p>

</div>

</div>

</div>

</section>

</main>

<footer class="main-footer">

<div class="container">

<p>&copy; 2025 Rekindle Academy. All Rights Reserved.</p>

<div class="footer-links">

<a href="#">Privacy Policy</a>

<a href="#">Contact Us</a>

</div>
 </div>

</footer>

<script src="script.js"></script>

</body>

</html>

Academics.html

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Academics - Rekindle Academy</title>

<link rel="icon" href="https://www.flaticon.com/svg/static/icons/svg/3565/3565914.svg"

type="image/svg+xml">

<link rel="stylesheet" href="style.css">

</head>

<body>

<header class="main-header">

<div class="container">

<a href="index.html" class="logo">Rekindle</a>

 <nav class="main-nav">

<ul>

<li><a href="index.html">Home</a></li>

<li><a href="academics.html">Academics</a></li>

<li><a href="admissions.html">Admissions</a></li>

<li><a href="student-life.html">Student Life</a></li>

<li><a href="portal.html" class="cta-button">Portal</a></li>

</ul>

</nav>

<button class="menu-toggle" aria-label="Open menu">

<span class="bar"></span>

<span class="bar"></span>

<span class="bar"></span>

</button>

</div>

</header>

<main>

<header class="page-header">

<div class="container">

<h1>Academic Excellence</h1>

<p>Our curriculum is thoughtfully designed to inspire intellectual curiosity and foster a deep
understanding of the world.</p>

</div>

</header>
 <section class="content-section">

<div class="container">

<h2>Our Core Curriculum</h2>

<p class="section-intro">At Rekindle Academy, we provide a structured yet flexible academic

pathway from junior school through to graduation. Our programs are designed to challenge students at
every level, encouraging both academic mastery and personal growth.</p>

<div class="curriculum-grid">

<div class="curriculum-card">

<h3>Junior School (Grades 1-5)</h3>

<p>The foundation of a Rekindle education is built here. We focus on igniting a love for
learning through inquiry-based projects, foundational literacy and numeracy, and exploration in science
and the arts.</p>

</div>

<div class="curriculum-card">

<h3>Middle School (Grades 6-8)</h3>

<p>This crucial transitional period encourages students to develop greater independence

and critical thinking. The curriculum diversifies, offering more choice in electives and fostering
collaborative skills.</p>

</div>

<div class="curriculum-card">

<h3>Senior School (Grades 9-12)</h3>

<p>Our senior school program is a comprehensive, college-preparatory experience.

Students engage in advanced coursework, including AP classes, and receive personalized guidance for
their university applications and future careers.</p>

</div>

</div>

</div>

</section>
 <section class="content-section dark-section">

<div class="container">

<h2>Meet Our Esteemed Faculty</h2>

<p class="section-intro">Our teachers are the heart of our academy. They are passionate
experts dedicated to mentoring the next generation of leaders.</p>

<div class="faculty-grid">

<div class="faculty-card">

<img src="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?
q=80&w=388" alt="Faculty Member">

<h4>Dr. Eleanor Vance</h4>

<p class="title">Head of Sciences</p>

<p>Ph.D. in Astrophysics, MIT. Dr. Vance inspires students to explore the universe, from
the smallest particle to the largest galaxy.</p>

</div>

<div class="faculty-card">

<img src="https://images.unsplash.com/photo-1560250097-0b93528c311a?q=80&w=387"
alt="Faculty Member">

<h4>Mr. David Chen</h4>

<p class="title">Director of Humanities</p>

<p>M.A. in History, Oxford. Mr. Chen brings history to life, connecting past events to
present-day global issues.</p>

</div>

<div class="faculty-card">

<img src="https://images.unsplash.com/photo-1556157382-97eda2d62296?q=80&w=582"
alt="Faculty Member">

<h4>Ms. Sofia Rossi</h4>

<p class="title">Arts & Design Chair</p>

 <p>MFA in Digital Arts, RISD. Ms. Rossi empowers students to express their creativity
through both traditional and digital media.</p>

</div>

<div class="faculty-card">

<img src="https://images.unsplash.com/photo-1542744173-8e7e53415bb0?w=500"
alt="Faculty Member">

<h4>Mr. Benjamin Carter</h4>

<p class="title">Athletics Director</p>

<p>M.S. in Sports Science. Coach Carter builds teams that value discipline, sportsmanship,
and relentless effort.</p>

</div>

</div>

</div>

</section>

</main>

<footer class="main-footer">

<div class="container">

<p>&copy; 2025 Rekindle Academy. All Rights Reserved.</p>

<div class="footer-links">

<a href="#">Privacy Policy</a>

<a href="#">Contact Us</a>

</div>

</div>

</footer>

<script src="script.js"></script>
</body>

</html>

Admissions.html

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Admissions - Rekindle Academy</title>

<link rel="icon" href="https://www.flaticon.com/svg/static/icons/svg/3565/3565914.svg"

type="image/svg+xml">

<link rel="stylesheet" href="style.css">

</head>

<body>

<header class="main-header">

<div class="container">

<a href="index.html" class="logo">Rekindle</a>

<nav class="main-nav">

<ul>
 <li><a href="index.html">Home</a></li>

<li><a href="academics.html">Academics</a></li>

<li><a href="admissions.html">Admissions</a></li>

<li><a href="student-life.html">Student Life</a></li>

<li><a href="portal.html" class="cta-button">Portal</a></li>

</ul>

</nav>

<button class="menu-toggle" aria-label="Open menu">

<span class="bar"></span>

<span class="bar"></span>

<span class="bar"></span>

</button>

</div>

</header>

<main>

<header class="page-header">

<div class="container">

<h1>Join Our Community</h1>

<p>Begin your journey at Rekindle Academy. We seek curious, compassionate, and courageous
students to join our vibrant community.</p>

</div>

</header>

<section class="content-section">

<div class="container">
 <h2>The Admissions Process</h2>

<p class="section-intro">Our admissions process is designed to be holistic and personal. We

want to get to know each applicant as an individual. The process is outlined in four simple steps.</p>

<div class="admissions-process">

<div class="step">

<p class="step-number">01</p>

<h3>Submit an Inquiry</h3>

<p>Start by filling out our online inquiry form to receive more information and access to
our application portal.</p>

</div>

<div class="step">

<p class="step-number">02</p>

<h3>Complete Application</h3>

<p>Submit your complete application, including academic transcripts, recommendations,

and student essays, via our portal.</p>

</div>

<div class="step">

<p class="step-number">03</p>

<h3>Campus Visit & Interview</h3>

<p>We invite all qualified applicants and their families for a campus tour and a personal
interview with our admissions team.</p>

</div>

<div class="step">

<p class="step-number">04</p>

<h3>Admissions Decision</h3>

<p>Decisions are rendered on a rolling basis. We look forward to welcoming the next class
of Rekindle scholars!</p>
 </div>

</div>

</div>

</section>

<section class="content-section dark-section">

<div class="container">

<h2>Tuition & Fees 2025-2026</h2>

<p class="section-intro">We are committed to making a Rekindle education accessible.

Financial aid is available for qualified families.</p>

<table class="fees-table">

<thead>

<tr>

<th>Program</th>

<th>Annual Tuition</th>

<th>Technology Fee</th>

<th>Total</th>

</tr>

</thead>

<tbody>

<tr>

<td>Junior School (1-5)</td>

<td>$28,000</td>

<td>$1,500</td>

<td>$29,500</td>

</tr>
 <tr>

<td>Middle School (6-8)</td>

<td>$32,000</td>

<td>$1,500</td>

<td>$33,500</td>

</tr>

<tr>

<td>Senior School (9-12)</td>

<td>$35,000</td>

<td>$2,000</td>

<td>$37,000</td>

</tr>

</tbody>

</table>

</div>

</section>

<section class="content-section">

<div class="container" style="max-width: 900px;">

<h2>Frequently Asked Questions</h2>

<div class="faq-list">

<div class="faq-item">

<button class="faq-question">What is the student-to-teacher ratio?</button>

<div class="faq-answer">

<p>At Rekindle Academy, we pride ourselves on personalized attention. Our average

student-to-teacher ratio is 8:1, ensuring every student receives the support they need to thrive.</p>
 </div>

</div>

<div class="faq-item">

<button class="faq-question">Do you offer financial aid or scholarships?</button>

<div class="faq-answer">

<p>Yes, we are dedicated to building a diverse community and offer need-based

financial aid. A limited number of merit-based scholarships are also available for students who
demonstrate exceptional talent in academics, arts, or athletics.</p>

</div>

</div>

<div class="faq-item">

<button class="faq-question">What is the application deadline?</button>

<div class="faq-answer">

<p>Our priority application deadline for the 2025-2026 school year is January 15, 2025.
We will continue to accept applications on a rolling basis as space permits.</p>

</div>

</div>

</div>

</div>

</section>

</main>

<footer class="main-footer">

<div class="container">

<p>&copy; 2025 Rekindle Academy. All Rights Reserved.</p>

<div class="footer-links">
 <a href="#">Privacy Policy</a>

<a href="#">Contact Us</a>

</div>

</div>

</footer>

<script src="script.js"></script>

</body>

</html>

Student life.html

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Student Life - Rekindle Academy</title>

<link rel="icon" href="https://www.flaticon.com/svg/static/icons/svg/3565/3565914.svg"

type="image/svg+xml">
 <link rel="stylesheet" href="style.css">

</head>

<body>

<header class="main-header">

<div class="container">

<a href="index.html" class="logo">Rekindle</a>

<nav class="main-nav">

<ul>

<li><a href="index.html">Home</a></li>

<li><a href="academics.html">Academics</a></li>

<li><a href="admissions.html">Admissions</a></li>

<li><a href="student-life.html">Student Life</a></li>

<li><a href="portal.html" class="cta-button">Portal</a></li>

</ul>

</nav>

<button class="menu-toggle" aria-label="Open menu">

<span class="bar"></span>

<span class="bar"></span>

<span class="bar"></span>

</button>

</div>

</header>

<main>
 <header class="page-header" style="background-image: linear-gradient(rgba(11, 12, 16, 0.8),
rgba(11, 12, 16, 0.8)), url('https://images.unsplash.com/photo-1523240795612-9a054b0db644?
q=80&w=2070');">

<div class="container">

<h1>Beyond the Classroom</h1>

<p>Education at Rekindle extends far beyond academics. We offer a rich tapestry of activities
that help students grow, lead, and connect.</p>

</div>

</header>

<section class="content-section">

<div class="container">

<div class="life-grid">

<div class="life-text">

<h3>Athletics & Wellness</h3>

<p>The Rekindle Flames compete in a dozen different sports with a legacy of

sportsmanship and excellence. Our state-of-the-art athletic center, playing fields, and wellness programs
support the physical and mental health of every student, whether they are a competitive athlete or just
looking to stay active.</p>

</div>

<div class="life-image">

<img src="https://images.unsplash.com/photo-1549488344-cbb6c1441ceb?
q=80&w=2070" alt="Students in a sports team">

</div>

</div>

<div class="life-grid">

<div class="life-text">

<h3>Arts & Creativity</h3>

 <p>From the stage to the studio, creativity thrives at Rekindle. Our programs in visual arts,
music, theatre, and dance encourage students to find their voice and express their vision. Student work
is showcased throughout the year in galleries, concerts, and theatrical productions.</p>

</div>

<div class="life-image">

<img src="https://images.unsplash.com/photo-1513364776144-60967b0f800f?
q=80&w=2071" alt="Student painting">

</div>

</div>

</div>

</section>

<section class="content-section dark-section">

<div class="container">

<h2>Clubs & Organizations</h2>

<p class="section-intro">With over 50 student-led clubs and organizations, there is something

for everyone at Rekindle. These groups provide invaluable opportunities for leadership, collaboration,
and pursuing passions.</p>

<div class="clubs-grid">

<div class="club-card">

<span class="icon">&#x1F916;</span>

<h4>Robotics Club</h4>

<p>Design, build, and compete with advanced robots.</p>

</div>

<div class="club-card">

<span class="icon">&#x1F310;</span>

<h4>Model UN</h4>
 <p>Debate global issues and practice diplomacy.</p>

</div>

<div class="club-card">

<span class="icon">&#x1F4DD;</span>

<h4>Literary Journal</h4>

<p>Publish student poetry, fiction, and essays.</p>

</div>

<div class="club-card">

<span class="icon">&#x1F3A8;</span>

<h4>Art Collective</h4>

<p>Create collaborative art projects for the community.</p>

</div>

<div class="club-card">

<span class="icon">&#x1F3AF;</span>

<h4>Archery Club</h4>

<p>Develop focus, discipline, and precision.</p>

</div>

<div class="club-card">

<span class="icon">&#x1F4BB;</span>

<h4>Coding Society</h4>

<p>Learn new languages and develop real-world apps.</p>

</div>

</div>

</div>

</section>
 </main>

<footer class="main-footer">

<div class="container">

<p>&copy; 2025 Rekindle Academy. All Rights Reserved.</p>

<div class="footer-links">

<a href="#">Privacy Policy</a>

<a href="#">Contact Us</a>

</div>

</div>

</footer>

<script src="script.js"></script>

</body>

</html>

Portable.html

<!DOCTYPE html>
<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Portal - Rekindle Academy</title>

<link rel="icon" href="https://www.flaticon.com/svg/static/icons/svg/3565/3565914.svg"

type="image/svg+xml">

<link rel="stylesheet" href="style.css">

</head>

<body>

<header class="main-header">

<div class="container">

<a href="index.html" class="logo">Rekindle</a>

<nav class="main-nav">

<ul>

<li><a href="index.html">Home</a></li>

<li><a href="academics.html">Academics</a></li>

<li><a href="admissions.html">Admissions</a></li>

<li><a href="student-life.html">Student Life</a></li>

<li><a href="portal.html" class="cta-button">Portal</a></li>

</ul>

</nav>

<button class="menu-toggle" aria-label="Open menu">

<span class="bar"></span>

<span class="bar"></span>
 <span class="bar"></span>

</button>

</div>

</header>

<main>

<div class="portal-container">

<div class="form-box">

<h2>Student & Parent Portal</h2>

<form id="login-form">

<div class="input-group">

<input type="email" id="login-email" required>

<label for="login-email">Email Address</label>

</div>

<div class="input-group">

<input type="password" id="login-password" required>

<label for="login-password">Password</label>

</div>

<button type="submit" class="form-btn">Secure Login</button>

<p class="form-switch-link">

Don't have an account? <a href="admissions.html">Apply Now</a>

</p>

</form>

</div>

</div>
 </main>

<footer class="main-footer" style="position: absolute; bottom: 0; width: 100%;">

<div class="container">

<p>&copy; 2025 Rekindle Academy. All Rights Reserved.</p>

</div>

</footer>

<script src="script.js"></script>

</body>

</html>