+
+```
+
+Et on stylise les titres `h2` et les encadrés `.item` :
+
+```css
+h2 {
+ color: white;
+ background: teal;
+ padding: 5px;
+ margin: 0px 0px 10px 0px;
+ box-shadow: 2px 2px 2px gray;
+ text-align: center;
+}
+
+.item {
+ padding: 10px;
+ margin-bottom: 10px;
+ border: 3px dashed teal;
+}
+```
+
+À retenir :
+
+- `border: 3px dashed teal;` crée une bordure en **pointillés**. Essaie aussi `solid`, `dotted` ou `double` pour comparer.
+- `box-shadow` ajoute une ombre portée. Les deux premières valeurs sont le décalage horizontal et vertical, la troisième le flou.
+
+---
+
+## Étape 4 — Ajouter la photo
+
+On insère une image à l'intérieur de l'encart, et on lui donne la classe `photo` pour la styliser à part :
+
+```html
+
+
+Mignon le chaton !
+
+ 
+
+```
+
+Dans le CSS :
+
+```css
+img {
+ max-width: 100%;
+}
+
+.photo {
+ box-shadow: 4px 4px 4px gray;
+ transform: rotate(10deg);
+}
+```
+
+Deux notions importantes ici :
+
+- `max-width: 100%` empêche l'image de **déborder** de son encart, quelle que soit sa taille d'origine ;
+- `transform: rotate(10deg)` incline l'image de 10 degrés vers la droite — comme une polaroïd collée de travers sur un cahier. Essaie `-10deg` pour la pencher dans l'autre sens.
+
+> Si tu travailles sur trinket.io, glisse ton image dans le panneau de fichiers à gauche et utilise exactement le même nom dans l'attribut `src`.
+
+---
+
+## Étape 5 — Ajouter d'autres articles
+
+Le principe est désormais simple : à chaque fois que tu veux un nouvel article, tu copies un bloc `Mignon le chaton !
+
+…
` et tu remplaces son contenu. Tu peux les répartir librement entre `column1` et `column2`.
+
+Quelques idées d'éléments à mettre dans un `.item` :
+
+- un titre `` ; +- un paragraphe `
` ; +- une image avec la classe `photo` ; +- une liste `
- ` avec des `
- `.
+
+---
+
+## Étape 6 — Ajouter une petite animation (bonus)
+
+Pour donner vie à la page, on peut faire vibrer légèrement la photo au survol de la souris. Voici un exemple de règle à ajouter au CSS :
+
+```css
+.photo:hover {
+ transform: rotate(-5deg) scale(1.05);
+ transition: transform 0.3s ease-in-out;
+}
+```
+
+- `:hover` se déclenche quand le curseur passe sur l'élément ;
+- `scale(1.05)` agrandit l'image de 5 % ;
+- `transition` rend le changement progressif au lieu d'être brutal.
+
+---
+
+## Le corrigé complet
+
+### `index.html`
+
+```html
+
+
+
+
+
+
+
mon magazine
+ +++ + + +``` + +### `style.css` + +```css +h1 { + text-align: center; + color: white; + background: teal; + padding: 5px; +} + +body { + background: linear-gradient(to bottom right, lemonchiffon, white); + padding: 15px; + font-family: Carlito; +} + +.column1 { + width: 48%; + float: left; +} + +.column2 { + width: 48%; + float: right; +} + +img { + max-width: 100%; +} + +.photo { + box-shadow: 4px 4px 4px gray; + transform: rotate(10deg); +} + +.item { + padding: 10px; + margin-bottom: 10px; + border: 3px dashed teal; +} + +h2 { + color: white; + background: teal; + padding: 5px; + margin: 0px 0px 10px 0px; + box-shadow: 2px 2px 2px gray; + text-align: center; +} +``` + +--- + +## Pour aller plus loin + +- Remplace les `float` par **Flexbox** (`display: flex` sur le parent) : c'est la méthode moderne pour disposer des colonnes. +- Essaie une grille à 3 colonnes avec **CSS Grid** (`display: grid; grid-template-columns: 1fr 1fr 1fr;`). +- Ajoute une **font** depuis [Google Fonts](https://fonts.google.com) pour remplacer Carlito. +- Rends ton magazine **responsive** avec une `@media (max-width: 600px)` qui repasse les colonnes en pleine largeur sur mobile. + +## Sources + +- Projet original : [projects.raspberrypi.org/en/projects/magazine](https://projects.raspberrypi.org/en/projects/magazine/) — Raspberry Pi Foundation, sous licence Creative Commons BY-SA 4.0. +- Environnement d'édition : [trinket.io](https://trinket.io). \ No newline at end of file++Mignon le chaton !
+
+