Ngano Secondary and Senior School Website

A modern, responsive website for Ngano Secondary and Senior School built with vanilla HTML, CSS, and JavaScript.

🛠 Technologies Used

📋 Project Overview

This is a comprehensive school website featuring:

• Home Page - Welcome section with hero slides, principal's message, mission & vision, news & events, gallery, and contact information
• Departments Page - Information about various school departments (Mathematics, Sciences, Languages, Arts, Sports, Student Support, Music)
• Login Portal - Multi-portal authentication system for Students, Staff, and Alumni
• Responsive Design - Fully responsive layout optimized for mobile, tablet, and desktop devices
• Interactive Features - Hero slideshow, image gallery with lightbox, mobile navigation, feedback form

📁 Project Structure

ngano/
├── index.html              # Home page
├── departments.html        # Departments page
├── login.html             # Login/Portal page
├── css/
│   ├── main.css           # Main stylesheet
│   ├── departments.css    # Departments page styles
│   └── login.css          # Login page styles
├── js/
│   ├── main.js            # Main JavaScript functionality
│   └── login.js           # Login portal logic
├── images/
│   ├── logo/              # School logo files
│   ├── hero-slides/       # Hero carousel images
│   ├── teachers/          # Staff/department images
│   ├── gallery/           # Photo gallery images
│   ├── alumni/            # Alumni photos
│   └── background/        # Background images
└── downloads/             # Downloads folder for resources

✨ Key Features

Home Page

• Hero Slideshow - Automatic and manual navigation through school highlights
• Welcome Section - School introduction and overview
• Principal's & Deputy's Messages - Leadership statements
• Mission & Vision - School values and goals
• News & Events - Latest school announcements and upcoming events
• Community-Based Education (CBE) - Information about community initiatives
• Resources - Educational materials and external resources
• Gallery - Image gallery with lightbox viewer
• Location - Embedded map for school location
• Testimonials - Student and alumni feedback
• Contact Form - Feedback and inquiry submission
• Responsive Navigation - Mobile-friendly sidebar menu

Departments Page

• Department overview cards with head of department information
• Academic departments (Mathematics, Sciences, Languages, Arts)
• Co-curricular departments (Sports, Student Support, Music)
• Department head profiles and statements

Login Portal

• Multi-portal system with dynamic content switching
• Student Portal - For accessing grades and announcements
• Staff Portal - For managing classes and attendance
• Alumni Portal - For staying connected with the school
• Password visibility toggle
• Form validation
• Responsive design

🎨 Design Highlights

• Color Scheme - Professional blue and navy palette with white accents
• Typography - Source Sans 3 (primary) and Source Serif 4 (headings)
• Icons - Font Awesome 7 icons throughout
• Animations - Smooth transitions and carousel animations
• Accessibility - Semantic HTML and ARIA labels for screen readers

📱 Responsive Breakpoints

• Mobile - Up to 767px
• Tablet - 768px to 1023px
• Desktop - 1024px and above

🚀 Getting Started

1. Clone or download the project
2. Open index.html in your web browser
3. Navigate through the different pages using the sidebar menu
4. Explore the responsive design by resizing your browser

Open the site live: Ngano Secondary School Website

📧 Contact & Support

• Email - nganosecondaryschool@gmail.com
• Phone - +254 115 080 359
• Location - Ngano, Nyandarua County, Kenya

👤 Author

Created by munyuaw.io

📄 License

© 2025 Ngano Secondary. All rights reserved.

---

Note: This is a beginner project built with vanilla HTML, CSS, and JavaScript for learning and demonstration purposes.