TP7 : Site boutique de jeux vidéo en téléchargement

Cours HTML/CSS 2026 – Durée : 3h30 – Enseignant : Quentin Fait

Objectifs du TP

• Appliquer la typographie avec Google Fonts

• Utiliser les variables CSS pour les couleurs

• Créer des dégradés et des ombres

• Produire un site avec une identité visuelle cohérente

Consignes générales

Configuration : Créez un dossier NOM-tp7-game-store sur votre ordinateur et ouvrez-le dans votre éditeur de code.

Important : Ce TP se concentre sur la typographie et les couleurs. Le HTML vous est fourni, vous créez uniquement le CSS.

Exercice : Boutique de Jeux Vidéo

Fichiers : store.html (fourni), store.css (à créer), et 6 images de jeux vidéo

Créez le style d’une boutique de jeux vidéo en ligne dans l’esprit de Steam, Epic Games ou GOG.

Préparation des images

• Trouvez 6 images de jeux vidéo (captures d’écran, artworks, jaquettes)

• Nommez-les game1.jpg à game6.jpg

• Placez-les dans le dossier tp7-game-store

Partie HTML (store.html)

Récupérez le fichier HTML store.html.

Le HTML est complet.

Partie CSS (store.css)

C’est vous qui écrivez tout le CSS en suivant les étapes.

Étape 1 : Variables CSS et Reset

Créez vos variables de couleurs et le reset de base.

Palette de couleurs suggérée :

• Fond sombre : #1b2838

• Bleu gaming : #1a9fff

• Violet : #8847ff

• Vert promo : #4caf50

• Texte clair : #c7d5e0

:root {
    --dark-bg: #1b2838;       /* Fond sombre (à modifier) */
    --primary: #1a9fff;       /* Couleur principale (à modifier) */
    --accent: #8847ff;        /* Couleur d'accent (à modifier) */
    --success: #4caf50;       /* Couleur positive (à modifier) */
    --text-light: #c7d5e0;    /* Texte clair (à modifier) */
    --card-bg: #16202d;       /* Fond des cartes (à modifier) */
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

img {
    max-width: 100%;
    height: auto;
}

Étape 2 : Typographie de base

Appliquez Google Fonts et définissez la typographie.

Changez les polices Google Fonts si vous voulez :

1. Allez sur https://fonts.google.com

2. Choisissez 2 polices adaptées (futuriste, moderne…)

3. Remplacez le lien dans le HTML

4. Utilisez-les dans le CSS ci-dessous

body {
    font-family: 'Roboto', sans-serif;  /* Police de texte - À MODIFIER */
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-light);
    background-color: var(--dark-bg);
}

h1, h2, h3 {
    font-family: 'Rajdhani', sans-serif;  /* Police de titres - À MODIFIER */
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

h1 {
    font-size: 56px;
    line-height: 1.1;
}

h2 {
    font-size: 36px;
    line-height: 1.2;
    margin-bottom: 30px;
}

h3 {
    font-size: 22px;
    line-height: 1.3;
}

Étape 3 : Hero avec dégradé

Créez une bannière d’accueil avec un dégradé gaming.

Ciblez hero et appliquez :

• Fond : dégradé linéaire avec vos variables

  • Exemple : linear-gradient(135deg, var(--primary), var(--accent))

• Texte blanc

• Padding : 100px 20px

• Alignement centré

Ciblez le <h1> dans hero :

• Couleur : #fff

• text-shadow: 0 0 20px rgba(26, 159, 255, 0.5); (effet néon)

• Marge basse : 10px

Ciblez tagline :

• Taille : 18px

• font-weight: 300

• Opacité : 0.9

Étape 4 : Bannière promo

Ciblez promo-banner et créez une bannière attractive :

• Fond : dégradé avec var(--success) et une couleur plus foncée

• Texte blanc

• Padding : 40px 20px

• Alignement centré

• Marge : 40px 0

Ciblez le <h2> dans promo-banner :

• Couleur : #fff

• text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);

• Marge basse : 10px

Ciblez promo-text :

• Taille : 20px

• Graisse : 500

• Marge basse : 5px

Ciblez promo-dates :

• Taille : 14px

• Opacité : 0.8

Étape 5 : Section des jeux

Ciblez games-section et appliquez :

• Padding : 60px 20px

Ciblez le <h2> dans games-section :

• Alignement centré

• Couleur : var(–text-light)

Étape 6 : Grille de jeux (mobile)

Ciblez games-grid et créez une grille :

• display: grid;

• Une colonne : grid-template-columns: 1fr;

• Espacement : gap: 25px;

• Largeur max : 1200px

• Centrage : margin: 0 auto;

Étape 7 : Cartes de jeux

Ciblez game-card et créez des cartes gaming :

• Fond : var(--card-bg)

• Coins arrondis : 8px

• Overflow : hidden

• Transition : 0.3s sur transform et box-shadow

• Position : relative (pour le badge)

Au survol de game-card :

• Ombre : box-shadow: 0 8px 32px rgba(26, 159, 255, 0.3);

• Translation : transform: translateY(-8px);

Ciblez les images dans game-card :

• Largeur : 100%

• Hauteur : 200px

• object-fit: cover

• Transition : 0.3s sur transform

Au survol de l’image dans game-card :

• transform: scale(1.05);

Étape 8 : Informations des jeux

Ciblez game-info :

• Padding : 15px

Ciblez le <h3> dans game-info :

• Couleur : #fff

• Marge basse : 8px

Ciblez genre :

• Taille : 13px

• Couleur : var(--text-light)

• Opacité : 0.7

• Marge basse : 12px

Étape 9 : Boîte de prix

Ciblez price-box et créez un layout :

• display: flex;

• align-items: center;

• gap: 10px;

Ciblez discount :

• Fond : var(--success)

• Couleur : #fff

• Padding : 4px 8px

• Coins arrondis : 4px

• Taille : 14px

• Graisse : bold

Ciblez old-price :

• Taille : 14px

• Couleur : #999

• text-decoration: line-through;

Ciblez price :

• Taille : 20px

• Couleur : var(--success)

• Graisse : bold

Étape 10 : Badge « Coup de cœur »

Ciblez badge et créez un badge en haut à droite :

• Position : absolute

• top: 10px;

• right: 10px;

• Fond : var(--accent)

• Couleur : #fff

• Padding : 6px 12px

• Coins arrondis : 4px

• Taille : 12px

• Graisse : bold

• text-transform: uppercase;

• box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);

Étape 11 : Carte mise en avant

Ciblez game-card.featured et appliquez :

• Bordure : 2px solid avec var(--accent)

Étape 12 : Section features

Ciblez features et créez un layout :

• display: flex;

• flex-wrap: wrap;

• gap: 20px;

• justify-content: center;

• Padding : 60px 20px

• Fond : légèrement plus clair que le fond général

  • Exemple : #0e1621

Ciblez feature-card :

• flex: 1 1 250px;

• Fond : var(--card-bg)

• Padding : 30px

• Coins arrondis : 8px

• Alignement centré

• Bordure : 1px solid avec une couleur transparente

  • Exemple : rgba(26, 159, 255, 0.2)

Ciblez le <h3> dans feature-card :

• Couleur : var(--primary)

• Marge basse : 10px

Étape 13 : Footer

Ciblez site-footer et créez un footer simple :

• Fond : #0a0e14 (plus sombre)

• Texte : var(--text-light)

• Padding : 30px 20px

• Alignement centré

• Opacité du texte : 0.6

Étape 14 : Responsive - Tablette (768px)

@media (min-width: 768px) {
    .games-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

Étape 15 : Responsive - Desktop (1024px)

@media (min-width: 1024px) {
    .hero {
        padding: 140px 20px;
    }

    .hero h1 {
        font-size: 72px;
    }

    .games-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
    }
}

Livrables attendus

Un dossier tp7-game-store contenant :

• store.html (fourni, copié)

• store.css (créé par vous)

• 6 images de jeux

Pensez à valider votre code CSS : https://jigsaw.w3.org/css-validator/

Bonus (optionnel)

Si vous finissez en avance :

1. Ajoutez un effet de brillance au survol du badge :

.badge {
    transition: 0.3s;
}

.game-card:hover .badge {
    box-shadow: 0 0 15px var(--accent);
}

2. Animez le discount au survol :

.discount {
    transition: 0.3s;
}

.game-card:hover .discount {
    transform: scale(1.1);
}

3. Testez le contraste de vos couleurs sur fond sombre avec https://webaim.org/resources/contrastchecker/