# School Portfolio

A professional, responsive website for Wama Training Institute - a premier healthcare education institution dedicated to advancing medical knowledge and producing highly skilled healthcare professionals.

## 🌟 Features

- **Responsive Design** - Works perfectly on all devices (desktop, tablet, mobile)
- **Modern UI/UX** - Clean, professional design with smooth animations
- **Contact Form** - Functional contact form using Formspree integration
- **Course Catalog** - Beautiful course cards with flexible image containers
- **About Section** - Comprehensive overview of mission, vision, and values
- **Professional Color Scheme** - Consistent branding with #956c34 (gold), #07244b (navy blue), and #ffffff (white)

## 🚀 Live Demo

[wti.wamahospital.org]

## 🛠️ Technologies Used

- **HTML5** - Semantic markup
- **CSS3** - Modern styling with Flexbox/Grid
- **JavaScript** - Interactive functionality
- **Bootstrap 5** - Responsive framework
- **Font Awesome** - Icons
- **Formspree** - Contact form handling
- **Owl Carousel** - Course slider (optional)

## 📁 Project Structure

```
wama-training-institute/
│
├── index.html                 # Main HTML file
├── style.css                  # Main stylesheet
├── assets/
│   ├── images/               # All website images
│   │   ├── landing-page.jpg
│   │   ├── courses-01.jpg
│   │   ├── courses-02.jpg
│   │   ├── courses-03.jpg
│   │   ├── courses-04.jpg
│   │   ├── courses-05.jpg
│   │   ├── about-institution.jpg
│   │   └── [other images]
│   ├── css/                  # Additional CSS files
│   │   ├── fontawesome.css
│   │   ├── templatemo-grad-school.css
│   │   ├── owl.css
│   │   └── lightbox.css
│   ├── js/                   # JavaScript files
│   │   ├── custom.js
│   │   ├── owl-carousel.js
│   │   ├── isotope.min.js
│   │   └── [other JS files]
│   └── fonts/                # Font files
│
└── README.md
```

## 🎨 Color Scheme

- **Primary Color**: `#956c34` (Gold/Brown)
- **Secondary Color**: `#07244b` (Navy Blue) 
- **Background Color**: `#ffffff` (White)
- **Text Colors**: Various shades of blue and gray for contrast

## 📱 Sections

1. **Header** - Navigation with logo and menu
2. **Hero Banner** - Landing section with call-to-action
3. **Features** - Mission, Vision, Values highlights
4. **About Institution** - Overview with statistics
5. **Why Choose Us** - Tabs with key benefits
6. **Courses Offered** - Course catalog with cards
7. **Contact** - Contact form and information
8. **Footer** - Copyright and links

## ⚡ Quick Start

### Prerequisites
- Web browser (Chrome, Firefox, Safari, Edge)
- Text editor (VS Code, Sublime Text, etc.)
- Local server (for testing)




## 📧 Contact Form Setup

The contact form uses Formspree for backend functionality:

1. **Sign up** at [Formspree.io](https://formspree.io)
2. **Create a new form** in your dashboard
3. **Copy the form endpoint** (looks like `https://formspree.io/f/xjvqlqkz`)
4. **Replace** in `index.html`:
   ```html
   <form action="https://formspree.io/f/YOUR_FORM_ID" method="POST">
   ```
5. **Test** the form - submissions will be emailed to you



## 🔍 SEO Optimization

Key SEO elements included:
- Semantic HTML structure
- Meta tags and descriptions
- Alt text for images
- Proper heading hierarchy
- Mobile-friendly design
- Fast loading times



## 📄 License

This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details.

## 🙏 Acknowledgments

- Template based on [TemplateMo Grad School](https://templatemo.com/tm-557-grad-school)
- Icons by [Font Awesome](https://fontawesome.com)
- Forms by [Formspree](https://formspree.io)
- Images from [Unsplash](https://unsplash.com) (replace with actual images)