🎾 Roland Garros | French Open 2026

A premium, professional sports website celebrating the legacy of Roland Garros (French Open) with a live countdown timer to the next tournament and an interactive historical archive of past champions.

---

📋 Table of Contents

• Overview
• Features
• Tech Stack
• Project Structure
• Screenshots & Preview

---

🌟 Overview

This is a responsive, modern website dedicated to Roland Garros (French Open), one of tennis's most prestigious Grand Slam tournaments. The site features:

• Live Countdown Timer — Displays days, hours, minutes, and seconds until the next tournament
• Historical Archive — Browse champions from past years with images and details
• Premium UI/UX — Minimal luxury design with smooth animations and professional aesthetics
• Fully Responsive — Optimized for desktop, tablet, and mobile devices
• Professional Navigation — Smooth sidebar navigation and intuitive layout

Built with vanilla HTML, CSS (Tailwind), and JavaScript for maximum performance and no external dependencies (except Tailwind CDN).

---

✨ Features

🎯 Core Features

• ⏱️ Live Countdown Timer

  • Accurate countdown to May 24, 2026 (next Roland Garros)
  • Displays: Days, Hours, Minutes, Seconds
  • Automatic timezone handling (Europe/Paris with DST support)
  • Real-time updates every second

• 📜 Historical Champions Archive

  • Browse French Open winners from multiple years
  • High-quality champion images
  • Clean card-based layout
  • Responsive grid design

• 🎨 Minimal Luxury UI Design

  • Professional, calm aesthetic (no heavy glows)
  • Subtle animations and hover effects
  • Clean typography with Syncopate and Plus Jakarta Sans fonts
  • Neutral color palette (off-white, charcoal, subtle clay accents)

• 📱 Full Responsiveness

  • Mobile-first design
  • Optimized breakpoints (640px, 768px, 1024px)
  • Touch-friendly interface

• 🧭 Navigation

  • Fixed navbar with quick access
  • Smooth sidebar navigation
  • Links to official Roland Garros tickets
  • Social media integration

---

🛠️ Tech Stack

Technology	Purpose
HTML5	Semantic markup & structure
Tailwind CSS	Utility-first styling & responsive design
Vanilla JavaScript	Countdown logic & interactivity
Lucide Icons	Modern SVG icon library
Google Fonts	Premium typography (Syncopate, Plus Jakarta Sans)
Intl API	Automatic timezone & DST handling

No Dependencies Required - Uses CDN for Tailwind and Lucide. All countdown logic is custom vanilla JavaScript with zero external libraries.

---

📁 Project Structure

French_open_Website/
│
├── index.html          # Main HTML file (all-in-one: HTML, CSS, JS)
├── style.css           # External stylesheet (optional reference)
├── README.md           # Project documentation
│
└── assets/             # Images & resources (future expansion)
    └── (logos, icons, images to be added)

File Details

File	Purpose
index.html	Contains complete website: markup, styling, and countdown timer logic
style.css	Optional external stylesheet for future modularization
README.md	Documentation and setup instructions

---

🖼️ Screenshots & Preview

Coming Soon!

Preview the live site:

• Homepage — Hero section with current champion, countdown timer, and navigation
• Archive — Historical champions gallery with filtering
• Responsive Design — Mobile, tablet, and desktop views

Features in Action

• Countdown Timer — Live timer updating every second with accurate timezone handling
• Smooth Animations — Fade-in effects on page load and hover interactions
• Dark Theme — Premium minimal luxury aesthetic with clay accents

---

🎾 About Roland Garros

The French Open (Roland Garros) is one of tennis's four Grand Slam tournaments, held annually in Paris, France. Known for its iconic red clay courts and prestigious history, it attracts the world's best tennis players every May/June.

Official Website: rolandgarros.com

---