(S10) Mission 2 - Site Web HTML & CSS

Votre mission

Votre objectif

Transformer votre site HTML du TP1 en un site web moderne et attrayant en utilisant CSS, tout en conservant la structure HTML existante.

Suite au succès de votre prototype HTML, la direction du festival est impressionnée et vous mandate maintenant d'ajouter une couche de présentation professionnelle à votre site. Vous devez créer une feuille de style CSS qui transformera votre site HTML brut en un site moderne et engageant.

Prérequis

• Vous devez utiliser votre TP1 comme base de travail
• Si votre TP1 nécessite des corrections mineures de structure HTML, vous pouvez les effectuer
• Vous ne pouvez PAS utiliser de frameworks CSS (Bootstrap, Tailwind, etc.)
• Vous ne pouvez PAS utiliser de JavaScript

Structure de dossiers

Copiez votre dossier TP1_1234567 et renommez-le TP2_1234567 (en remplaçant 1234567 par votre numéro de DA).

Ajoutez un dossier css à votre structure existante:

TP2_1234567/
├── index.html
├── ... autres pages HTML
├── css/
│   └── style.css
└── images/
    ├── image1.png
    ├── image2.jpg
    └── ...

Exigences techniques CSS

1. Feuille de style externe

• Créez un fichier style.css dans le dossier css
• Liez ce fichier à TOUTES vos pages HTML avec la balise <link>
• Aucun style inline ou interne ne sera accepté

2. Mise en page et adaptation

Votre site doit avoir une mise en page structurée:

• Largeur maximale du contenu (ex: 1200px) avec marges automatiques pour centrer
• Mise en page fluide qui s'adapte à la largeur de l'écran. Vous n'êtes pas obligé de tester pour tout soit parfaitement fonctionnel sur mobile, mais le visuel doit être acceptable.
• Au moins une media query simple pour adapter certains éléments sur écrans plus petits (< 768px)
  • Par exemple: taille de police, marges, ou empilage d'éléments côte à côte

Utilisez:

• Les unités relatives où approprié (%, em, rem)
• Flexbox pour organiser certains éléments (navigation, éléments côtes-à-cotes, etc.)
• Les marges et paddings cohérents

3. Navigation

Transformez votre barre de navigation en une barre de navigation conventionnelle.

• Navigation pleine largeur (s'étend sur toute la largeur de l'écran)
• Utilisation de Flexbox pour organiser les éléments de navigation
• Navigation horizontale avec espacement approprié
• Navigation qui reste lisible sur mobile (peut s'empiler verticalement si nécessaire)
• Couleurs personnalisées pour tous les liens (pas de bleu/violet par défaut)
• États hover distinctifs sur les liens
• Indicateur visuel de la page active
• Logo intégré harmonieusement

4. Typographie et hiérarchie visuelle

• Utilisez au moins 2 polices différentes
• Définissez une hiérarchie claire (h1, h2, h3, p)
• Modifiez le style des titres (couleur, alignement, bordure, etc.)
• Différenciation visuelle entre les niveaux de titres (ex.: taille)

5. Palette de couleurs et thème

• Créez une palette cohérente d'au moins 5 couleurs (vous pouvez utiliser Coolors.co pour vous aider)
• Utilisez des variables CSS (:root) pour vos couleurs principales
• Appliquez un thème qui reflète l'ambiance du festival
• Contrastes appropriés pour la lisibilité

6. Éléments interactifs et animations

Ajoutez de la vie à votre site avec:

• Couleurs personnalisées pour TOUS les liens (pas de bleu/violet par défaut)
• États :hover sur les liens (changement de couleur, soulignement, etc.)
• Au moins 1 animation CSS (@keyframes)
• Au moins 1 transition CSS (sur l'élément de votre choix)
• Les boutons doivent être stylisés (couleur, taille, etc.)

7. Composants spécifiques

Page d'accueil

• Section principale avec grande image de fond (background-image) et texte par-dessus (Communément appelée hero section)
• Bonus: Utilisation d'un overlay (couche semi-transparente) pour améliorer la lisibilité du texte sur l'image

Page programmation

• Utilisez un style de couleur alterné pour les lignes des tableaux
• Menu de navigation latéral (gauche ou droite) pour naviguer entre les jours avec les ancres
• Utilisation de Flexbox pour positionner le menu à côté du contenu principal

Page artistes

• Pour afficher chaque artiste, utilisez un système de "cartes"
• Effet de survol sur les images
• Menu de navigation latéral (gauche ou droite) pour naviguer entre les artistes avec les ancres
• Utilisation de Flexbox pour positionner le menu à côté du contenu principal

Page billetterie

• Formulaire stylisé (modifier la taille des champs, couleur des bordures, padding, arrondis, etc.)
• Tableau de prix stylisé (bordures, couleurs de fond, mise en évidence d'une option recommandée)
• Boutons stylisés (couleur de fond, taille, bordures, effet au survol, différents du style par défaut)

Page informations

• FAQ avec details/summary stylisés (couleurs, bordures, icônes ou symboles pour indiquer l'ouverture/fermeture)
• Carte Google Maps avec bordure personnalisée

8. Pied de page

• pied de page pleine largeur (s'étend sur toute la largeur de l'écran, pas limité au conteneur de 1200px)
• Design moderne avec sections organisées
• Liens sociaux (même fictifs) avec icônes
• Séparation visuelle du contenu principal

9. Créativité et cohérence

• Design unique qui reflète le thème du festival
• Cohérence visuelle à travers toutes les pages
• Attention aux détails
• Qualité générale de l'intégration CSS

Modalités de remise

• Remis par Léa
• Remis avant le 4 novembre 2025 23:59
• Archive Zip de votre répertoire TP2_1234567

Grille d'évaluation

Critère	Points
Feuille de style externe et organisation des styles	10%
Mise en page et adaptation	15%
Navigation stylisée	15%
Typographie et hiérarchie	10%
Palette de couleurs et thème	10%
Éléments interactifs et animations	15%
Composants spécifiques bien stylisés	15%
Créativité et cohérence	10%
Total	100%