flexi-1/index.html at main · Ufidtech/flexi-1 · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bilis Academy</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <nav class="main-nav" aria-label="Main Navigation">
      <a href="#home" class="logo-link" tabindex="0">
        <img src="img/logo.jpg" alt="Bilis Academy Logo" class="academy-logo" loading="lazy">
      </a>
      <button class="nav-toggle" id="navToggle" aria-label="Open navigation menu" aria-controls="navBar" aria-expanded="false">
        <span class="hamburger"></span>
      </button>
      <ul class="nav-bar" id="navBar">
        <li><a href="#home">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#programs">Academics</a></li>
        <li><a href="#admission">Admission</a></li>
        <li><a href="#contact">Contacts</a></li>
      </ul>
    </nav>
  </header>
  <div class="hero" id="home">
    <img src="img/aldin-nasrun-s88REoTvSOM-unsplash.jpg" alt="Students at Bilis Academy" class="academy-image" loading="lazy">
    <div class="img-caption">Our vibrant student community</div>
    <h1>Bilis Academy</h1>
    <h2>Welcome to Bilis Academy</h2>
    <p>Have you been looking for a school where your child's future is of high priority and your child will not just be sound only in academics but also in religion? Welcome to Bilis Academy, where excellence meets opportunity! We are committed to nurturing young minds, fostering creativity, and shaping the future. Join us on a journey of learning, growth, and success.</p>
  </div>
  <section class="about-us about-bg" id="about">
    <img src="img/herlambang-tinasih-gusti-fYVI2V769Tc-unsplash.jpg" alt="About Bilis Academy" class="academy-image" loading="lazy">
    <div class="img-caption">A tradition of excellence and care</div>
    <h2>About Us</h2>
    <p>At Bilis Academy, we believe in shaping the leaders of tomorrow through education, innovation, and a strong sense of community. Since our founding, we have been committed to providing a nurturing environment where students thrive academically, socially, and personally. Our dedicated educators and state-of-the-art facilities empower students with the skills and confidence to excel in their chosen paths. Whether in the classroom or beyond, we cultivate curiosity, creativity, and a lifelong love of learning. Join us as we continue to inspire and uplift the next generation!</p>
  </section>
  <section class="mission-bg" id="mission-vision">
    <h2>Mission & Vision</h2>
    <p><strong>Mission:</strong> To provide a holistic education that nurtures the mind, body, and spirit of every student, preparing them for success in an ever-changing world.<br>
    <strong>Vision:</strong> To be a leading educational institution recognized for academic excellence, character development, and community engagement.</p>
  </section>
  <section id="programs" class="academic-programs academics-bg">
    <h2>Academic Programs</h2>
    <img src="img/samuel-steele-Qu1h2cUCUiU-unsplash.jpg" alt="Academic Programs" class="academy-image" loading="lazy">
    <div class="img-caption">Dynamic learning for every student</div>
    <p>We offer a well-rounded curriculum that fosters creativity, critical thinking, and academic excellence. From Early Years & Primary Education, where foundational skills are nurtured, to Middle & Secondary School, where students deepen their knowledge across subjects, we ensure a dynamic learning experience. Beyond academics, our extracurricular activities—including sports, arts, and leadership programs—help students build confidence and teamwork. With a personalized learning approach, we empower every student to reach their full potential and develop a lifelong love of learning.</p>
  </section>
  <!-- Academic Program Cards Section -->
  <section class="academic-program-cards-section">
    <div class="academic-programs-list">
      <div class="program-card" tabindex="0">
        <img src="img/sam-sul-47EwQ_mPUmY-unsplash.jpg" alt="Science Program" class="academy-image program-image" loading="lazy">
        <div class="img-caption">Science Lab in Action</div>
        <h3>Science</h3>
        <p>Physics, Chemistry, Biology, and Mathematics with modern labs and hands-on learning.</p>
      </div>
      <div class="program-card" tabindex="0">
        <img src="img/sam-sul-YLvZMy_xYgc-unsplash.jpg" alt="Arts Program" class="academy-image program-image" loading="lazy">
        <div class="img-caption">Creative Arts Studio</div>
        <h3>Arts</h3>
        <p>Literature, History, and Creative Arts to foster critical thinking and creativity.</p>
      </div>
      <div class="program-card" tabindex="0">
        <img src="img/azmi-hidayat-8SWM3WPHV3g-unsplash.jpg" alt="Technology Program" class="academy-image program-image" loading="lazy">
        <div class="img-caption">Technology & Robotics</div>
        <h3>Technology</h3>
        <p>Computer Science, Robotics, and Digital Skills for the future workforce.</p>
      </div>
    </div>
  </section>
  <!-- Testimonials Section -->
  <section class="testimonials">
    <h2>What Our Community Says</h2>
    <div class="testimonial-quote">“Bilis Academy has transformed my child’s life. The teachers truly care!”</div>
    <div class="testimonial-author">— Mrs. A. Yusuf, Parent</div>
    <div class="testimonial-quote">“I love the science lab and all the fun activities!”</div>
    <div class="testimonial-author">— Chinedu, Student</div>
  </section>
  <section class="admission admission-bg" id="admission">
    <h2>Admission</h2>
    <p>Join the Bilis Academy family and embark on an exciting educational journey! We welcome students of all backgrounds and provide a nurturing environment for growth and success. Our admissions process is simple and designed to guide you every step of the way.<br>
    🔹 <strong>How to Apply:</strong> Complete the online application form or visit our admissions office for assistance.<br>
    🔹 <strong>Requirements:</strong> Age-appropriate enrollment criteria, previous academic records, and necessary documents.<br>
    🔹 <strong>Deadlines:</strong> Ensure timely application submissions for a smooth transition.<br>
    🔹 <strong>Scholarships & Financial Aid:</strong> Opportunities available for eligible students.<br>
    Ready to begin? Contact our admissions team today and take the first step toward a bright future at Bilis Academy!</p>
  </section>
  <!-- Application Form Section -->
  <section class="application-section">
    <h3>Application Form</h3>
    <form id="applicationForm" class="application-form">
      <div>
        <label for="applicantName">Full Name:</label>
        <input type="text" id="applicantName" name="applicantName" required placeholder="e.g. Ibrahim Danjuma" autofocus>
      </div>
      <div>
        <label for="dob">Date of Birth:</label>
        <input type="date" id="dob" name="dob" required>
      </div>
      <div>
        <label for="email">Email:</label>
        <input type="email" id="email" name="email" required placeholder="e.g. ufidfarooq@gmail.com">
      </div>
      <div>
        <label for="phone">Phone Number:</label>
        <input type="tel" id="phone" name="phone" required pattern="[0-9]{10,15}" placeholder="e.g. 09018784117">
      </div>
      <div>
        <label for="address">Address:</label>
        <input type="text" id="address" name="address" required placeholder="e.g. 123 Military Valley Jikwoyi, Abuja">
      </div>
      <div>
        <label for="class">Class Applying For:</label>
        <select id="class" name="class" required>
          <option value="">Select</option>
          <option value="Primary 1">Primary 1</option>
          <option value="Primary 2">Primary 2</option>
          <option value="JSS 1">JSS 1</option>
          <option value="JSS 2">JSS 2</option>
          <option value="SS 1">SS 1</option>
          <option value="SS 2">SS 2</option>
        </select>
      </div>
      <div>
        <label for="parent">Parent/Guardian Name:</label>
        <input type="text" id="parent" name="parent" required placeholder="e.g. Ibrahim Garba">
      </div>
      <div class="consent-row">
        <input type="checkbox" id="consent" name="consent" required>
        <label for="consent">I confirm that the information provided is correct.</label>
      </div>
      <button type="submit">Apply</button>
      <div id="appConfirmationMessage"></div>
    </form>
  </section>
  <!-- FAQ Section -->
  <section class="faq-section">
    <h2>Frequently Asked Questions</h2>
    <div class="faq">
      <div class="faq-question">What are the school hours?</div>
      <div class="faq-answer">School runs from 8:00am to 3:00pm, Monday to Friday.</div>
    </div>
    <div class="faq">
      <div class="faq-question">Is there a school bus service?</div>
      <div class="faq-answer">Yes, we offer safe and reliable transportation for students in most areas.</div>
    </div>
    <div class="faq">
      <div class="faq-question">How do I apply for admission?</div>
      <div class="faq-answer">You can apply online using the form above or visit our admissions office for assistance.</div>
    </div>
  </section>
  <!-- Scroll-to-top button -->
  <button id="scrollToTopBtn" aria-label="Scroll to top" title="Back to top">↑</button>

  <!-- Lightbox Modal (moved outside footer for semantics) -->
  <div class="lightbox" id="lightboxModal">
    <button class="close-btn" id="lightboxClose" aria-label="Close">&times;</button>
    <img src="" alt="Enlarged image" id="lightboxImg">
  </div>

  <footer>
    <section class="contact" id="contact">
      <h2>Contact Us</h2>
      <p>We'd love to hear from you! For inquiries, support, or more information about Bilis Academy, please use the details below or fill out our contact form.</p>
      <ul>
        <li><strong>Address:</strong> 123 Military Valley, Abuja, Nigeria</li>
        <li><strong>Phone:</strong> (+234) 90-1878-4117</li>
        <li><strong>Email:</strong> info@bilisacademy.edu</li>
      </ul>
      <h3>Contact Form</h3>
      <form id="contactForm" class="contact-form">
        <div>
          <label for="contactName">Your Name:</label>
          <input type="text" id="contactName" name="contactName" required placeholder="e.g. Ibrahim Danjuma">
        </div>
        <div>
          <label for="contactEmail">Your Email:</label>
          <input type="email" id="contactEmail" name="contactEmail" required placeholder="e.g. ufidfarooq@gmail.com">
        </div>
        <div>
          <label for="contactMessage">Message:</label>
          <textarea id="contactMessage" name="contactMessage" required placeholder="Type your message here..." rows="4"></textarea>
        </div>
        <button type="submit">Send Message</button>
        <div id="contactConfirmationMessage"></div>
      </form>
    </section>
    <div class="social-links">
      <!-- ...social icons as in your original... -->
      <!-- Keep your SVGs here -->
    </div>
    <p class="copyright">&copy; 2025 Bilis Academy. All rights reserved.</p>
  </footer>
  <script src="contact.js"></script>
  <script src="main.js"></script>
  <script src="application.js"></script>
</body>
</html>