# FabLab RedSea STEM Club Website

A modern, responsive website for the FabLab RedSea STEM Club at RedSea STEM High School. This website showcases the club's three main branches: 2D Design, 3D Design, and Robotics.

## 🚀 Features

### Main Page (index.html)
- **Hero Section**: Eye-catching gradient background with call-to-action
- **About Section**: Three interactive cards for each branch (2D, 3D, Robotics)
- **Competition Section**: Information about upcoming competitions
- **Statistics Section**: Impact metrics and achievements
- **Gallery**: Showcase of student projects
- **Testimonials**: Student feedback with auto-rotating carousel
- **FAQ**: Expandable frequently asked questions
- **Call-to-Action**: Engaging section to encourage participation
- **Contact**: Contact information and social media links
- **Mobile Responsive**: Fully responsive design with mobile menu

### Session Pages
Each branch has its own dedicated page with:
- **Detailed Session Information**: Comprehensive breakdown of what students learn
- **Video Integration**: YouTube videos for each session
- **Interactive Modals**: Click to watch session videos
- **Additional Resources**: Extra learning materials and tools
- **Equipment Lists**: Hardware and software used in each branch

## 📁 File Structure

```
FabLab-RedSea-STEM-High-School-main/
├── index.html              # Main homepage
├── 2D.html                # 2D Design sessions page
├── 3d.html                # 3D Design sessions page
├── robotics.html           # Robotics sessions page
├── README.md              # This documentation
└── Images/                # Image assets
    ├── main.png           # Main logo
    ├── 2D_Logo.jpg       # 2D Design logo
    ├── 3D_Logo.jpg       # 3D Design logo
    ├── Robotics_Logo.jpg  # Robotics logo
    ├── 2D.jpg            # 2D Design showcase
    ├── 3D.jpg            # 3D Design showcase
    └── Robotics.jpg       # Robotics showcase
```

## 🎨 Design Features

### Visual Design
- **Modern Gradient Backgrounds**: Eye-catching color schemes for each branch
- **Card-based Layout**: Clean, organized information presentation
- **Hover Effects**: Interactive elements with smooth transitions
- **Responsive Design**: Works perfectly on all device sizes
- **Professional Typography**: Clear, readable text hierarchy

### Interactive Elements
- **Modal Videos**: Click to watch session videos in popup windows
- **FAQ Accordion**: Expandable questions and answers
- **Testimonial Carousel**: Auto-rotating student testimonials
- **Mobile Menu**: Hamburger menu for mobile devices
- **Smooth Scrolling**: Smooth navigation between sections

## 🛠️ Technical Details

### Technologies Used
- **HTML5**: Semantic markup structure
- **CSS3**: Modern styling with Tailwind CSS
- **JavaScript**: Interactive functionality
- **Tailwind CSS**: Utility-first CSS framework
- **YouTube Embed**: Video integration

### Browser Compatibility
- Chrome (recommended)
- Firefox
- Safari
- Edge
- Mobile browsers

## 📱 Mobile Experience

The website is fully optimized for mobile devices with:
- **Responsive Navigation**: Collapsible mobile menu
- **Touch-friendly Buttons**: Large, easy-to-tap elements
- **Optimized Images**: Fast-loading, properly sized images
- **Readable Text**: Appropriate font sizes for mobile screens
- **Smooth Interactions**: Touch-optimized interactions

## 🎯 Session Content

### 2D Design Branch
- **Session 1**: Introduction to Graphic Design
- **Session 2**: Laser Cutting & Digital Fabrication
- **Session 3**: Advanced Design & Portfolio

### 3D Design Branch
- **Session 1**: Introduction to 3D Modeling
- **Session 2**: Advanced Modeling & 3D Printing
- **Session 3**: Professional 3D Design

### Robotics Branch
- **Session 1**: Introduction to Robotics & Programming
- **Session 2**: Advanced Robotics & Automation
- **Session 3**: Competition Robotics & AI

## 🚀 Getting Started

1. **Open the Website**: Simply open `index.html` in any modern web browser
2. **Navigate**: Use the navigation menu or scroll through sections
3. **Explore Sessions**: Click on any branch card to view detailed sessions
4. **Watch Videos**: Click "Watch Session Video" buttons to view tutorials
5. **Mobile Experience**: The website automatically adapts to mobile devices

## 📞 Contact Information

- **Email**: hmmmma78@gmail.com
- **Location**: RedSea STEM High School, FabLab Room
- **Social Media**: Instagram, Facebook, YouTube (links to be added)

## 🏆 Competition Information

The website features information about upcoming competitions:
- **RedSea Innovators Competition**: Open to all three branches
- **Status**: Coming Soon
- **Participants**: 46+ members
- **STEM Hours**: 180+ hours completed

## 🔧 Customization

To customize the website:
1. **Update Content**: Edit the HTML files to change text and information
2. **Replace Images**: Update images in the `Images/` folder
3. **Change Videos**: Replace YouTube video IDs in the session pages
4. **Modify Colors**: Update Tailwind CSS classes for different color schemes
5. **Add Sections**: Extend the website with additional content sections

## 📈 Performance

The website is optimized for:
- **Fast Loading**: Minimal external dependencies
- **SEO Friendly**: Proper meta tags and semantic HTML
- **Accessibility**: Screen reader compatible
- **Cross-browser**: Works on all modern browsers

## 🎓 Educational Value

This website serves as:
- **Student Portal**: Easy access to session information
- **Parent Resource**: Information about club activities
- **Competition Hub**: Updates on upcoming events
- **Showcase Platform**: Display of student work and achievements

---

**© 2025 FabLab RedSea STEM Club. All rights reserved.**