Decathlon Landing Page - CSS Challenge

This repository is a hands-on practice project for developers looking to master modern CSS layout techniques by replicating a real-world store landing page.

The Challenge: Recreate This Page

Your goal is to write the HTML and CSS to recreate the landing page shown in the screenshot below.

The Final Result

---

Workflow

1. Study the Goal:

   • Look closely at the screenshot above.
   • Open the original decathlon.html file in your browser to see the live page and how it behaves.

2. Build Your Solution:

   • Create your own new files (e.g., index.html and style.css).
   • Using the provided image assets in the repository, try to build your own version from scratch.

3. Review the Original Code:

   • Once you're done, or if you get stuck, open the decathlon.html file.
   • This file contains the original solution code (all HTML and CSS). Compare your work to the original to see how it was built and learn new techniques.

---

What You Will Practice

This single-page challenge is an excellent exercise for:

• CSS Grid: Building a complex, asymmetrical grid for the info section.
• Flexbox: Creating a responsive, wrapped product card gallery.
• Flex order Property: Manipulating the visual order of elements.
• Layout & Positioning: Using position: fixed for the navbar and position: relative for text on images.
• Backgrounds & Media: Implementing background-size: cover and object-fit: cover for responsive media.
• Semantic HTML: Structuring a complete webpage (<nav>, <header>, <section>, etc.).

---

Getting Started

No server, compilation, or dependencies are required.

1. Clone the repository:

   git clone https://github.com/ayoubabbadi/Decathlon-Landing-Page-CSS-Challenge.git

2. Navigate to the directory:

   cd Decathlon-Landing-Page-CSS-Challenge

3. Start the challenge!

   • Open decathlon.html to see the goal in action.
   • Create your own files and start building.

---

Project Manifest

This repository contains all necessary files for the challenge.

• decathlon.html: The Original Solution File containing all HTML and CSS.
• final-result.png: (Or your screenshot name) The target design.
• All Image/Video Assets: logo.png, decathlon.mp4, Running Shoes.png, Yoga Mat.jpg, etc.