🏃 Run - Intégration HTML / CSS

Projet d’intégration d’une maquette simple en HTML5 et CSS3, avec une attention particulière portée à la structure, à la responsivité et aux animations légères.
Le but est de reproduire une landing page moderne mettant en avant une présentation, du contenu textuel, des images et un formulaire de contact.

---

🖼️ Aperçu

---

🚀 Démo

Voir la démo

---

📂 Structure du projet

.
├── index.html
├── Assets
│   ├── Images
│   │   ├── banner.jpg
│   │   ├── img-left.jpg
│   │   ├── img-right.jpg
│   │   └── responsive-img.png
│    └── Maquettes
│       └── maquette desktop.png
│       └── maquette mobile.png
│   └── Styles
│       └── style.css

• index.html → Structure HTML de la page.

• Assets/Images/ → Images utilisées dans le projet.

• Assets/Maquettes/ → Mes maquettes (Desktop,mobile).

• Assets/Styles/style.css → Feuille de style principale.

🛠️ Technologies utilisées

• HTML5 → structure sémantique.

• CSS3 → mise en page moderne (Grid, Flexbox, media queries).

• Google Fonts → typographie (Montserrat).

• Font Awesome → icônes pour le footer.

✨ Fonctionnalités

• 🎨 Mise en page en grilles et flexbox.

• 📱 Design responsive (breakpoints : 930px, 783px, 600px, 425px).

• 🖼️ Intégration d’images adaptatives.

• 📨 Formulaire de contact avec champs Nom, Email et Message.

• 🎭 Effets hover avec transitions douces.

🔧 Installation & utilisation

• Cloner le dépôt :

• git clone https://github.com/TheGitMau/TheGitMau.run.io

• Se placer dans le projet :

• cd TheGitMau.run.io

• Ouvrir le projet dans ton navigateur :

• Double-cliquer sur index.html

• ou lancer avec une extension comme Live Server sous VS Code.

📱 Responsivité

• ≥ 930px → Layout en grilles.

• ~783px → Passage en blocs verticaux.

• ≤ 425px → Formulaire et footer adaptés aux petits écrans.

📌 Améliorations possibles

• Ajouter une vraie logique de traitement du formulaire (backend ou service tiers type Formspree).

• Optimiser les images (compression WebP/AVIF).

• Ajouter une animation d’apparition (Fade-in/Slide-in) pour améliorer l’expérience utilisateur.

👨‍💻 Auteur

Projet réalisé par @TheGitMau

💼 GitHub : @TheGitMau

📄 Licence

Ce projet est distribué sous licence MIT.

Tu es libre de l’utiliser, le modifier et le partager.