AGAPE FC OFFICIAL FOOTBALL CLUB WEBSITE

A fully responsive, modern multipage website for AGAPE FC football club.
Built with HTML5, CSS3, JavaScript, and Bootstrap 5.

---

Features

Pages Included

• Homepage - Hero banner, match highlights, latest news, featured players
• About Us - Club history, mission, vision, coaching staff, achievements
• Team & Players - Complete squad roster with individual player profiles
• Fixtures & Results - Upcoming matches, past results, league table, countdown timer
• News/Blog - Match reports, announcements, club updates with social sharing
• Gallery - Photo and video gallery with categories
• Tickets - Match tickets, season tickets with pricing
• Shop - Online merchandise store with shopping cart
• Sponsors - Partner showcase and partnership information
• Contact - Contact form, map, FAQs, office information
• Player Profile - Detailed player stats and biography (sample page)

Key Features

• Fully responsive design (mobile, tablet, desktop)
• Modern football-themed design with AGAPE FC branding
• Bootstrap 5 framework
• Smooth animations and hover effects
• Interactive JavaScript functionality
• SEO-optimized with meta tags
• Social media integration
• Newsletter subscription
• Shopping cart functionality
• Contact form with validation
• Match countdown timer
• Sticky navigation header
• Back-to-top button
• Image lightbox for gallery
• Cross-browser compatible
• Fast loading and optimized

---

Design

Color Palette

• Primary: #1a4d2e (Dark Green)
• Secondary: #ffd700 (Gold)
• Accent: #ff6b35 (Orange-Red)
• Dark: #0d1f14 (Very Dark Green)
• Light: #f8f9fa (Light Gray)

Typography

• Font Family: Segoe UI, Tahoma, Geneva, Verdana, sans-serif
• Clean, modern, and readable

---

Project Structure

Agape/
├── README.md              # Project documentation
├── vercel.json            # Vercel deployment configuration
├── Pages/                 # HTML pages
│   ├── index.html         # Homepage
│   ├── about.html         # About Us page
│   ├── team.html          # Team & Squad page
│   ├── fixtures.html      # Fixtures & Results
│   ├── news.html          # News & Blog
│   ├── gallery.html       # Photo & Video Gallery
│   ├── tickets.html       # Ticket Information
│   ├── shop.html          # Online Shop
│   ├── sponsors.html      # Sponsors & Partners
│   ├── contact.html       # Contact Page
│   └── player-profile.html # Player Profile Sample
├── Styles/                # Stylesheets
│   └── style.css          # Custom styles
├── Script/                # JavaScript files
│   └── main.js            # JavaScript functionality
└── Gallery/               # Image gallery
    └── *.jpeg             # Team and match photos

---

Getting Started

Installation

1. Download/Clone the project

   • All files are ready in the Agape folder

2. Open in Browser

   • Simply open Pages/index.html in your web browser
   • No server required for basic functionality

3. For Development

   • Use a local server like Live Server (VS Code extension)
   • Or use Python: python -m http.server 8000
   • Or use Node.js: npx http-server

---

Customization

Update Club Information

1. Colors: Edit CSS variables in Styles/style.css (lines 2-7)
2. Content: Update text directly in HTML files (in Pages/ folder)
3. Images: Replace placeholder images with actual photos in Gallery/ folder
4. Logo: Update the futbol icon in navigation with your club logo

Replace Placeholder Images

Current placeholders use via.placeholder.com. Replace with:

• Player photos (stored in Gallery/ folder)
• Match action shots
• Training photos
• Event images
• Sponsor logos

Update Contact Information

Edit in all HTML files in Pages/ folder (footer section):

• Address: 90112 Matuu - Machakos
• Phone: +254 714452396
• Email: info@agapefc.com

---

Responsive Breakpoints

• Mobile: < 576px
• Tablet: 576px - 768px
• Desktop: 768px - 992px
• Large Desktop: > 992px

---

Key Components

Navigation

• Fixed sticky header
• Responsive mobile menu
• Active page highlighting
• Smooth scroll behavior

Forms

• Contact form with validation
• Newsletter subscription
• Ticket purchase forms
• All forms include proper validation

Interactive Features

• Match countdown timer
• Shopping cart system
• Image lightbox
• Carousel sliders
• Smooth animations
• Back-to-top button

---

External Dependencies

All dependencies are loaded via CDN:

• Bootstrap 5.3.0
• Font Awesome 6.4.0

---

SEO Optimization

Each page includes:

• Proper meta descriptions
• Keywords
• Open Graph tags (for social sharing)
• Semantic HTML structure
• Alt text for images
• Proper heading hierarchy

---

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)
• Opera (latest)

---

To-Do for Production

1. Replace all placeholder images
2. Update all contact information
3. Add actual player data and statistics
4. Integrate with a backend for:
   • Contact form submission
   • Newsletter signup
   • Ticket purchasing
   • Shop/cart functionality
5. Add actual social media links
6. Set up analytics (Google Analytics)
7. Add favicon
8. Optimize images for web
9. Set up SSL certificate
10. Configure proper meta tags with actual URLs

---

Customization Tips

Change Club Colors

/* In Styles/style.css */
:root {
    --primary-color: #1a4d2e;    /* Your club's main color */
    --secondary-color: #ffd700;   /* Your club's accent color */
    --accent-color: #ff6b35;      /* Additional accent */
}

Update Social Media Links

Find all social media icon sections and update href attributes:

<a href="https://facebook.com/yourclub" aria-label="Facebook">
    <i class="fab fa-facebook-f"></i>
</a>

---

Support

For questions or issues:

• Email: info@agapefc.com

---

AGAPE FC - Passion, Unity, Victory - Together We Rise! -------- MADE WITH BY ANTECH. -----