Exercice 5 : Styliser un article de blog (Corrigé)
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Guide du Dresseur Pokémon</title>
<link rel="stylesheet" href="corrige-style.css">
</head>
<body>
<article class="pokemon-guide">
<header class="guide-header">
<h1>Guide du Dresseur Pokémon</h1>
<p class="intro">
Bienvenue dans le monde merveilleux des Pokémon ! Ce guide vous aidera à devenir
le meilleur dresseur. Préparez vos Poké Balls et en route pour l'aventure !
</p>
<p class="author-info">
Par <span class="author">Sacha Ketchum</span> •
<time datetime="2025-10-28">28 octobre 2025</time>
</p>
</header>
<img src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/25.png"
alt="Pikachu"
class="main-image">
<div class="guide-content">
<h2>Les types de Pokémon</h2>
<p>Il existe 18 types différents de Pokémon, chacun avec ses forces et faiblesses. Comprendre ces types est essentiel pour devenir un bon dresseur et remporter des combats stratégiques. Chaque type possède des avantages contre certains types et des faiblesses face à d'autres, créant ainsi un système de combat profond et tactique qui fait la richesse de l'univers Pokémon.</p>
<h3>Types les plus populaires</h3>
<ul>
<li><strong>Feu</strong> : Salamèche, Dracaufeu, Pyroli</li>
<li><strong>Eau</strong> : Carapuce, Tortank, Aquali</li>
<li><strong>Plante</strong> : Bulbizarre, Florizarre, Phyllali</li>
<li><strong>Électrique</strong> : Pikachu, Raichu, Voltali</li>
</ul>
<p class="tip">
💡 Conseil de pro : Gardez toujours une équipe équilibrée avec différents types
pour être prêt à affronter n'importe quel adversaire !
</p>
<h2>Les Pokémon de départ</h2>
<p>Au début de votre aventure, vous devrez choisir votre premier Pokémon parmi trois options. Ce choix est crucial car votre Pokémon de départ vous accompagnera tout au long de votre périple et deviendra souvent votre partenaire le plus fidèle. Chaque région propose ses propres Pokémon de départ, mais le principe reste le même : un Pokémon de type Feu, un de type Eau et un de type Plante.</p>
<h3>Kanto - Région classique</h3>
<ol>
<li><strong>Bulbizarre</strong> (Type Plante/Poison)</li>
<li><strong>Salamèche</strong> (Type Feu)</li>
<li><strong>Carapuce</strong> (Type Eau)</li>
</ol>
<div class="info-card">
<h4>Le saviez-vous ?</h4>
<p>Pikachu était initialement prévu pour évoluer en Raichu dans l'anime, mais il est resté sous sa forme de base pour rester mignon et populaire auprès des fans ! Cette décision a fait de Pikachu l'un des Pokémon les plus reconnaissables au monde et la véritable mascotte de la franchise.</p>
</div>
<h2>Stratégies de combat</h2>
<p>Gagner des combats ne dépend pas seulement de la force brute de vos Pokémon, mais aussi de votre capacité à élaborer des stratégies efficaces. Un bon dresseur doit savoir anticiper les mouvements de son adversaire, connaître les faiblesses des types adverses, et utiliser les capacités de son équipe de manière optimale. La préparation avant le combat est tout aussi importante que les décisions prises pendant l'affrontement.</p>
<ul class="strategy-list">
<li>Connaître les faiblesses de vos adversaires</li>
<li>Utiliser des objets au bon moment</li>
<li>Entraîner votre équipe de manière équilibrée</li>
<li>Apprendre les meilleures capacités</li>
</ul>
<h2>Ressources utiles</h2>
<ul class="resources">
<li><a href="#">Pokédex complet</a></li>
<li><a href="#">Carte interactive des régions</a></li>
<li><a href="#">Calculateur de types</a></li>
<li><a href="#">Guide des évolutions</a></li>
</ul>
</div>
<footer class="guide-footer">
<p class="intro">
Vous voilà prêt à débuter votre aventure ! N'oubliez jamais : l'important n'est
pas d'être le plus fort, mais de créer des liens avec vos Pokémon.
Bonne chance, futur Maître Pokémon ! ⚡
</p>
<p class="copyright">© 2025 - Guide du Dresseur Pokémon</p>
</footer>
</article>
</body>
</html>
/* ===================================
CORRIGÉ - Exercice CSS Pokémon
================================= */
/* ===== ÉTAPE 1 : RESET ET BASE ===== */
/* 1.1 Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* 1.2 Page */
body {
font-family: Arial, Helvetica, sans-serif;
line-height: 1.6;
color: #333;
background-color: #FFF9E6;
}
/* 1.3 Titres */
h1, h2, h3, h4 {
color: #CC0000;
font-weight: bold;
}
h1 {
font-size: 48px;
margin-bottom: 15px;
}
h2 {
font-size: 36px;
margin-top: 40px;
margin-bottom: 20px;
}
h3 {
font-size: 24px;
margin-top: 30px;
margin-bottom: 15px;
}
h4 {
font-size: 20px;
margin-bottom: 10px;
}
/* 1.4 Autres éléments */
p {
margin-bottom: 20px;
}
a {
color: #3B4CCA;
text-decoration: none;
transition: color 0.3s ease;
}
a:hover {
color: #CC0000;
text-decoration: underline;
}
ul, ol {
margin-left: 30px;
margin-bottom: 20px;
}
li {
margin-bottom: 10px;
}
strong {
font-weight: bold;
color: #CC0000;
}
/* ===== ÉTAPE 2 : CONTAINER PRINCIPAL ===== */
.pokemon-guide {
max-width: 900px;
margin: 50px auto;
background-color: white;
padding: 50px;
border-radius: 15px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
border: 5px solid #FFCB05;
}
/* ===== ÉTAPE 3 : EN-TÊTE DE L'ARTICLE ===== */
/* 3.1 Zone d'en-tête */
.guide-header {
background: linear-gradient(135deg, #CC0000 0%, #FF6B6B 100%);
color: white;
padding: 40px;
border-radius: 10px;
margin-bottom: 30px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}
/* 3.2 Titre dans l'en-tête */
.guide-header h1 {
color: white;
text-align: center;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
margin-bottom: 20px;
}
/* 3.3 Paragraphe d'introduction - SIMPLIFIÉ */
/* Cette classe est RÉUTILISÉE dans le footer pour la conclusion */
.intro {
font-size: 18px;
}
/* 3.4 Informations auteur */
.author-info {
font-size: 14px;
text-align: center;
border-top: 2px solid rgba(255, 255, 255, 0.3);
padding-top: 15px;
margin-top: 15px;
}
.author {
font-weight: bold;
background: rgba(255, 255, 255, 0.2);
padding: 3px 10px;
border-radius: 20px;
}
/* ===== ÉTAPE 4 : IMAGE PRINCIPALE ===== */
.main-image {
width: 100%;
height: auto;
border-radius: 10px;
margin-bottom: 30px;
display: block;
border: 5px solid #FFCB05;
}
/* ===== ÉTAPE 5 : CONTENU DE L'ARTICLE ===== */
/* 5.1 Titres h2 dans le contenu */
.guide-content h2 {
border-left: 6px solid #FFCB05;
padding-left: 20px;
background: linear-gradient(to right, #FFF9E6 0%, transparent 100%);
padding: 10px 0 10px 20px;
}
/* 5.2 Paragraphes dans le contenu */
.guide-content p {
color: #555;
text-align: justify;
}
/* 5.3 Encadré "Conseil" */
.tip {
background: #E8F8FF;
border: 3px solid #3B4CCA;
border-radius: 10px;
padding: 20px;
margin: 25px 0;
font-style: italic;
box-shadow: 0 2px 8px rgba(59, 76, 202, 0.2);
}
/* 5.4 Encadré "Le saviez-vous ?" */
.info-card {
background: #FFF3CD;
border: 3px dashed #FFCB05;
border-radius: 10px;
padding: 25px;
margin: 30px 0;
}
.info-card h4 {
color: #FF6B00;
margin-top: 0;
}
.info-card p {
margin-bottom: 0;
color: #856404;
}
/* 5.5 Liste de stratégies */
.strategy-list {
background: #F0F0F0;
border-left: 5px solid #CC0000;
padding: 20px 20px 10px 40px;
border-radius: 8px;
margin: 20px 0;
}
/* 5.6 Liste de ressources */
.resources {
background: #E8F5E9;
border: 2px solid #4CAF50;
border-radius: 10px;
padding: 20px 20px 10px 40px;
list-style: none;
margin-left: 0;
}
.resources li {
padding: 8px 0;
border-bottom: 1px solid #C8E6C9;
}
.resources > li:last-child {
border-bottom: none;
}
.resources a {
display: block;
font-weight: 500;
transition: all 0.3s ease;
}
.resources a:hover {
padding-left: 10px;
color: #2E7D32;
}
/* 5.7 Premier paragraphe du contenu */
.guide-content > p:first-of-type {
font-size: 20px;
color: #2c3e50;
font-weight: 500;
}
/* ===== ÉTAPE 6 : PIED DE PAGE ===== */
/* 6.1 Zone de pied de page */
.guide-footer {
background: linear-gradient(135deg, #3B4CCA 0%, #5C6FD8 100%);
color: white;
padding: 40px;
border-radius: 10px;
margin-top: 40px;
text-align: center;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}
/* 6.2 Paragraphe de conclusion */
/* RÉUTILISATION : La classe .intro est déjà définie plus haut ! */
/* Le paragraphe de conclusion hérite automatiquement du style .intro */
/* Aucun CSS supplémentaire nécessaire ici */
/* 6.3 Copyright */
.copyright {
font-size: 14px;
opacity: 0.8;
margin-top: 20px;
margin-bottom: 0;
}
/* ===== ÉTAPE 7 : TOUCHES FINALES ===== */
/* 7.1 Premier élément des listes ul */
.guide-content ul li:first-child {
font-weight: 500;
color: #CC0000;
}
/* 7.1 Éléments impairs des listes ol */
.guide-content ol li:nth-child(odd) {
background: #FFF9E6;
padding: 8px;
border-radius: 5px;
margin-left: -10px;
padding-left: 10px;
}
/* 7.2 Transitions déjà appliquées dans les sections précédentes */