St. Mary's Junior School Website

A modern, responsive website for St. Mary's Junior School, Ntenjeru.

Features

• Responsive Design: Mobile-first approach with hamburger navigation
• Interactive Elements: Photo slider, form validation, smooth scrolling
• Complete Pages: Home, About, Academics, Admissions, Gallery, News, Contact
• Modern UI: Clean design with school colors (blue, green, yellow)
• Functional Forms: Contact and admission forms with validation
• Organized Structure: CSS and JS files in dedicated folders

File Structure

├── index.html          # Homepage
├── about.html          # About Us page
├── academics.html      # Academic programs
├── admissions.html     # Admission information
├── gallery.html        # Photo gallery
├── contact.html       # Contact information
├── css/
│   └── styles.css     # Main stylesheet
├── js/
│   └── main.js        # JavaScript functionality
├── images/            # Image assets (placeholder)
└── downloads/         # Downloadable files

Key Features

Responsive Navigation

• Desktop: Full navigation menu
• Mobile: Hamburger menu with slide-out navigation

Interactive Components

• Auto-sliding photo carousel
• Form validation and submission
• Gallery modal for image viewing
• Smooth scrolling navigation
• Back-to-top button

Forms

• Admission Form: Complete application with validation
• Contact Form: Multi-purpose contact with subject selection
• Success/error message display
• Required field validation

Mobile Optimization

• Touch-friendly navigation
• Responsive grid layouts
• Optimized typography and spacing
• Fast loading on mobile networks

Browser Support

• Chrome, Firefox, Safari, Edge
• Mobile browsers (iOS Safari, Chrome Mobile)
• Internet Explorer 11+ (with graceful degradation)

Setup Instructions

1. Place all files in web server directory
2. Ensure proper folder structure is maintained
3. Add actual images to /images/ folder
4. Update contact information and school details as needed
5. Test on various devices and browsers

Customization

• Colors can be modified in css/styles.css
• School information updated in HTML files
• Add real images to replace placeholder backgrounds
• Integrate with actual backend for form submissions