Projet : Intégration Maquette Figma (Atelier)

Ce projet représente la phase d'intégration (développement web) faisant suite à un atelier de conception d'une maquette Figma. L'objectif était de transformer le design d'une interface utilisateur (UI) statique en un site web fonctionnel et structuré grâce à HTML5 et CSS3.

🚀 Fonctionnalités et Structure

Le projet est composé de plusieurs pages web illustrant différentes rubriques du site :

• Accueil (index.html) : Page principale avec une section Hero (image en plein écran, titre) et une présentation structurée avec des cartes (Flexbox).
• Actualités (actualites.html) : Une page affichant différents articles et nouveautés en utilisant la puissance de CSS Grid pour organiser les cartes de contenu de manière esthétique.
• Vie Pratique (vie_pratique.html) : Présentation du "Menu du jour" et de "l'Agenda Flash" avec un style épuré et des sections dédiées (Flexbox).
• Événements (evenements.html) : (Page référencée dans la navigation).

🛠️ Technologies Utilisées

• HTML5 : Pour la sémantique et la structuration des pages (utilisation des balises <header>, <nav>, <section>, <footer>, etc.).
• CSS3 :
  • Flexbox pour l'alignement et la répartition de l'espace sur les pages (en-tête, pied de page, conteneurs principaux).
  • CSS Grid pour l'affichage en grille spécifique de la page Actualités (grid-template-columns: repeat(3, 1fr)).
  • Gestion des couleurs, des bordures arrondies (border-radius), et des ombres pour correspondre à un design moderne.
• Polices : Utilisation de polices sans serif modernes (Poppins et Inter).

📂 Architecture du Projet

Atelier-figma/
│
├── index.html           # Page d'accueil
├── actualites.html      # Page des actualités
├── vie_pratique.html    # Page vie pratique
├── README.md            # Description du projet (ce fichier)
│
├── Style/
│   └── index.css        # Fichier CSS global regroupant tous les styles du site
│
└── IMG/                 # Dossier contenant les ressources graphiques (logo, images)

💻 Comment lancer le projet en local ?

1. Clonez ce dépôt ou téléchargez les fichiers sur votre ordinateur.
2. Assurez-vous d'avoir tous les fichiers et dossiers dans le même répertoire (Atelier-figma).
3. Ouvrez simplement le fichier index.html dans n'importe quel navigateur web moderne (Google Chrome, Mozilla Firefox, Safari, Edge, etc.) en double-cliquant dessus.
4. Utilisez la barre de navigation (Header) pour naviguer entre les différentes pages de la maquette intégrée.

🎨 À propos du Design

L'intégration respecte fidèlement la maquette d'origine élaborée sur Figma avec :

• Un jeu de couleurs moderne comprenant des tons neutres (#fff, #D1D1D1) et des accents dynamiques (ex: bouton orange #FF8C00).
• Un design aéré privilégiant les espaces (margin, padding) et les bordures adoucies.
• Une navigation fluide en haut et rappelée en bas de page.

---

Ce projet a été réalisé dans le cadre d'un atelier pratique alliant Design (Figma) et Développement Front-End (HTML/CSS).