`. On commence par un encart simple, dans la colonne de droite : ```html

Mignon le chaton !

``` 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 `

…

` 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

Mignon le chaton !

``` ### `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).