convert content to md

1 files changed, 53 insertions, 59 deletions

diff --git a/files/fr/learn/css/building_blocks/a_cool_looking_box/index.md b/files/fr/learn/css/building_blocks/a_cool_looking_box/index.md
index da13496b05..5be0014eeb 100644
--- a/files/fr/learn/css/building_blocks/a_cool_looking_box/index.md
+++ b/files/fr/learn/css/building_blocks/a_cool_looking_box/index.md
@@ -14,86 +14,80 @@ tags:
 translation_of: Learn/CSS/Building_blocks/A_cool_looking_box
 original_slug: Apprendre/CSS/styliser_boites/A_cool_looking_box
 ---
-<div>{{LearnSidebar}}</div>
+{{LearnSidebar}}{{PreviousMenu("Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper", "Learn/CSS/Styling_boxes")}}
 
-<div>{{PreviousMenu("Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper", "Learn/CSS/Styling_boxes")}}</div>
-
-<p>Avec cette évaluation, vous obtiendrez une meilleure pratique dans la création de boîtes d'aspect rafraîchissant en faisant en sorte qu'elles attirent le regard.</p>
+Avec cette évaluation, vous obtiendrez une meilleure pratique dans la création de boîtes d'aspect rafraîchissant en faisant en sorte qu'elles attirent le regard.
 
 <table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Prérequis :</th>
-   <td>Avant de faire cet exercice vous devez avoir vu tous les articles de ce module.</td>
-  </tr>
-  <tr>
-   <th scope="row">Objectif :</th>
-   <td>Tester votre compréhension du modèle de boîte CSS et toutes les fonctionnalités associées comme les encadrements et les arrière‑plans.</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">Prérequis :</th>
+      <td>
+        Avant de faire cet exercice vous devez avoir vu tous les articles de ce
+        module.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Objectif :</th>
+      <td>
+        Tester votre compréhension du modèle de boîte CSS et toutes les
+        fonctionnalités associées comme les encadrements et les arrière‑plans.
+      </td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Départ">Départ</h2>
+## Départ
+
+Pour débuter, vous devez :
 
-<p>Pour débuter, vous devez :</p>
+- faire des copies locales de ces [HTML](https://github.com/mdn/learning-area/blob/master/css/styling-boxes/cool-information-box-start/index.html) et [CSS](https://github.com/mdn/learning-area/blob/master/css/styling-boxes/cool-information-box-start/style.css) — enregistrez‑les sous les noms `index.html` et `style.css` dans un nouveau répertoire.
 
-<ul>
- <li>faire des copies locales de ces <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/cool-information-box-start/index.html">HTML</a> et <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/cool-information-box-start/style.css">CSS</a> — enregistrez‑les sous les noms <code>index.html</code> et <code>style.css</code> dans un nouveau répertoire.</li>
-</ul>
+> **Note :** Autrement, vous pouvez utiliser un site comme  [JSBin](http://jsbin.com/) ou [Thimble](https://thimble.mozilla.org/) pour faire cet exercice. Collez le HTML et complétez la CSS dans un des éditeurs en ligne. Si l'éditeur en ligne que vous utilisez ne dispose pas d'un panneau séparé pour la CSS, vous pouvez le mettre dans un élément `<style>` dans l'élément `head` du document.
 
-<div class="note">
-<p><strong>Note :</strong> Autrement, vous pouvez utiliser un site comme  <a class="external external-icon" href="http://jsbin.com/">JSBin</a> ou <a class="external external-icon" href="https://thimble.mozilla.org/">Thimble</a> pour faire cet exercice. Collez le HTML et complétez la CSS dans un des éditeurs en ligne. Si l'éditeur en ligne que vous utilisez ne dispose pas d'un panneau séparé pour la CSS, vous pouvez le mettre dans un élément <code>&lt;style&gt;</code> dans l'élément <code>head</code> du document.</p>
-</div>
+## Résumé du projet
 
-<h2 id="Résumé_du_projet">Résumé du projet</h2>
+Votre tâche consiste à créer une boîte élégante et rafraîchissante tout en explorant le côté ludique des CSS.
 
-<p>Votre tâche consiste à créer une boîte élégante et rafraîchissante tout en explorant le côté ludique des CSS.</p>
+### Généralités
 
-<h3 id="Généralités">Généralités</h3>
+- Appliquez la CSS au HTML.
 
-<ul>
- <li>Appliquez la CSS au HTML.</li>
-</ul>
+### Composition de la boîte
 
-<h3 id="Composition_de_la_boîte">Composition de la boîte</h3>
+Vous devez appliquer un style à l'élément {{htmlelement("p")}} en lui donnant :
 
-<p>Vous devez appliquer un style à l'élément {{htmlelement("p")}} en lui donnant :</p>
+- une largeur raisonnable pour un gros bouton, disons autout de 200 pixels,
+- une hauteur raisonnable pour un gros bouton en centrant le texte verticalement dans ce processus,
+- un texte centré horizontalement,
+- une taille de texte légérement augmentée, vers 17-18 pixels. Utilisez les rem comme unité. Écrivez un commentaire sur la façon dont vous avez opéré pour le calcul de la valeur.
+- une couleur de base pour l'aspect général. Cette couleur de boîte sera celle de son arrière‑plan.
+- la même couleur pour le texte. Faites en sorte qu'il soit lisible en le dotant d'un ombrage de couleur noire.
+- un encadrement avec des coins arrondis subtils,
+- un encadrement de 1-pixel uni de couleur similaire à la couleur de base, mais légérement plus foncée.
+- un gradient linéaire noir semi‑transparent à partir du coin inférieur droit. Faites‑le totalement transparent au départ et donnez‑lui une opacité croissante de 0,2 sur 30% de la longueur puis restant de la même couleur jusqu'à l'autre extrémité.
+- des ombres de boîte multiples. Donnez lui un ombrage la faisant ressortir légérement de la page. Les autres deux seront des ombres avec la propriété `inset` — une ombre blanche semi-transparente près de l'angle supérieur gauche et une ombre semi‑transparent noir près de l'angle inférieur droit — pour donner un aspect surélevé 3D à la boîte.
 
-<ul>
- <li>une largeur raisonnable pour un gros bouton, disons autout de 200 pixels,</li>
- <li>une hauteur raisonnable pour un gros bouton en centrant le texte verticalement dans ce processus,</li>
- <li>un texte centré horizontalement,</li>
- <li>une taille de texte légérement augmentée, vers 17-18 pixels. Utilisez les rem comme unité. Écrivez un commentaire sur la façon dont vous avez opéré pour le calcul de la valeur.</li>
- <li>une couleur de base pour l'aspect général. Cette couleur de boîte sera celle de son arrière‑plan.</li>
- <li>la même couleur pour le texte. Faites en sorte qu'il soit lisible en le dotant d'un ombrage de couleur noire.</li>
- <li>un encadrement avec des coins arrondis subtils,</li>
- <li>un encadrement de 1-pixel uni de couleur similaire à la couleur de base, mais légérement plus foncée.</li>
- <li>un gradient linéaire noir semi‑transparent à partir du coin inférieur droit. Faites‑le totalement transparent au départ et donnez‑lui une opacité croissante de 0,2 sur 30% de la longueur puis restant de la même couleur jusqu'à l'autre extrémité.</li>
- <li>des ombres de boîte multiples. Donnez lui un ombrage la faisant ressortir légérement de la page. Les autres deux seront des ombres avec la propriété <code>inset</code> — une ombre blanche semi-transparente près de l'angle supérieur gauche et une ombre semi‑transparent noir près de l'angle inférieur droit — pour donner un aspect surélevé 3D à la boîte.</li>
-</ul>
+## Exemple
 
-<h2 id="Exemple">Exemple</h2>
+Cette capture d'écran montre un exemple de ce à quoi l'aspect final pourrait ressembler :
 
-<p>Cette capture d'écran montre un exemple de ce à quoi l'aspect final pourrait ressembler :</p>
+![](fancy-box.png)
 
-<p><img alt="" src="fancy-box.png"></p>
+## Évaluation
 
-<h2 id="Évaluation">Évaluation</h2>
+Si vous faites cet exercice dans le cadre d'un cours organisé, vous devez pouvoir donner votre travail à votre professeur pour notation. Si vous faites de l'auto-formation, vous pouvez obtenir le guide de notation très facilement en le demandant sur  [le fil de discussion à propos de cet exercice](https://discourse.mozilla.org/t/fundamental-css-comprehension-assessment/24682) ou par l'intermédiaire du canal IRC [#mdn](irc://irc.mozilla.org/mdn) sur [Mozilla IRC](https://wiki.mozilla.org/IRC). Faites l'exercice d'abord, il n'y rien à gagner en trichant !
 
-<p>Si vous faites cet exercice dans le cadre d'un cours organisé, vous devez pouvoir donner votre travail à votre professeur pour notation. Si vous faites de l'auto-formation, vous pouvez obtenir le guide de notation très facilement en le demandant sur  <a class="external external-icon" href="https://discourse.mozilla.org/t/fundamental-css-comprehension-assessment/24682" rel="noopener">le fil de discussion à propos de cet exercice</a> ou par l'intermédiaire du canal IRC <a href="irc://irc.mozilla.org/mdn">#mdn</a> sur <a class="external external-icon" href="https://wiki.mozilla.org/IRC" rel="noopener">Mozilla IRC</a>. Faites l'exercice d'abord, il n'y rien à gagner en trichant !</p>
+{{PreviousMenu("Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper", "Learn/CSS/Styling_boxes")}}
 
-<p>{{PreviousMenu("Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper", "Learn/CSS/Styling_boxes")}}</p>
 
-<p> </p>
 
-<h2 id="Dans_ce_module">Dans ce module</h2>
+## Dans ce module
 
-<ul>
- <li><a href="/fr/Apprendre/CSS/styliser_boites/Box_model_recap">Le modèle de boîte : récapitulatif</a></li>
- <li><a href="/fr/Apprendre/CSS/styliser_boites/Backgrounds">Arrière-plans</a></li>
- <li><a href="/fr/docs/Apprendre/CSS/styliser_boites/Borders">Encadrements</a></li>
- <li><a href="/fr/Apprendre/CSS/styliser_boites/Styling_tables">Mise en page des tableaux</a></li>
- <li><a href="/fr/Apprendre/CSS/styliser_boites/Advanced_box_effects">Effets de boîte avancés</a></li>
- <li><a href="/fr/docs/Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper">Creation d'un en-tête de papier à lettre élégant</a></li>
- <li><a href="/fr/Apprendre/CSS/styliser_boites/A_cool_looking_box">Une boîte d'aspect rafraîchissant</a></li>
-</ul>
+- [Le modèle de boîte : récapitulatif](/fr/Apprendre/CSS/styliser_boites/Box_model_recap)
+- [Arrière-plans](/fr/Apprendre/CSS/styliser_boites/Backgrounds)
+- [Encadrements](/fr/docs/Apprendre/CSS/styliser_boites/Borders)
+- [Mise en page des tableaux](/fr/Apprendre/CSS/styliser_boites/Styling_tables)
+- [Effets de boîte avancés](/fr/Apprendre/CSS/styliser_boites/Advanced_box_effects)
+- [Creation d'un en-tête de papier à lettre élégant](/fr/docs/Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper)
+- [Une boîte d'aspect rafraîchissant](/fr/Apprendre/CSS/styliser_boites/A_cool_looking_box)