# Metro Zoo Template

A comprehensive 4-page zoo website template showcasing wildlife conservation, education, and family adventure. Inspired by leading zoo websites and built with RSL components.

## Pages Included

1. **Home (index.html)** - Hero carousel, quick links, featured animals, daily schedule, conservation stats, events, membership CTA
2. **Animals (animals.html)** - Featured elephant exhibit spotlight, animal categories (mammals, birds, reptiles, aquatic), conservation status badges
3. **Visit (visit.html)** - Tickets & pricing, hours, zoo map, directions, dining options, accessibility information, membership tiers
4. **Events (events.html)** - Daily schedule with tabs, special events calendar, educational programs, private event venues

## RSL Components Used

- **Navbar** - Sticky navigation with dropdowns
- **Carousel** - Hero slideshow with indicators
- **Cards** - Animal cards, event cards, ticket cards, dining cards
- **Accordion** - FAQ sections, conservation status guide
- **Tabs** - Daily schedule filtering by event type
- **Buttons** - Primary, outline, and CTA buttons
- **Grid System** - Responsive layouts throughout

## Features

- **ADA/WCAG 2.1 AA Compliant** - Skip links, semantic HTML, ARIA labels, keyboard navigation
- **Dark Mode Support** - Full dark theme throughout all pages
- **Responsive Design** - Mobile-first with breakpoints for all devices
- **Performance Optimized** - Lazy-loaded images, minimal dependencies
- **Conservation Focused** - IUCN status badges, conservation messaging

## Color Palette

- **Primary (Forest Green)**: `#2D5016`
- **Secondary (Gold)**: `#C5A572`
- **Accent (Sky Blue)**: `#4A90A4`
- **Background (Cream)**: `#F5F3ED`
- **Earth Tones**: Rich browns for nature feel

## Typography

- **Headings**: Poppins (600-800 weight)
- **Body**: Open Sans (400-600 weight)

## Getting Started

1. Include the RSL core files (styles/, javascript/)
2. Include the template-specific files:
   - `metro-zoo-style.css` - Template styling
   - `metro-zoo-script.js` - Template interactions
3. Customize content and images as needed

## Customization

### Changing Colors
Override CSS variables in your custom stylesheet:
```css
:root {
    --zoo-primary: #2D5016;
    --zoo-secondary: #C5A572;
    --zoo-accent: #4A90A4;
}
```

### Updating Content
- Replace placeholder images with your zoo's photos
- Update animal information and conservation statuses
- Modify schedule times and events
- Customize membership pricing and benefits

## Image Credits

Template uses placeholder images from Unsplash. Replace with your own high-quality zoo photography for production use.

## License

MIT License - see LICENSE file for details

## Support

For questions about this template or RSL framework, visit [rslayout.com](https://rslayout.com)
