diff --git a/B-evenements.md b/B-evenements.md
index 6ca14792ef880040da2980f0a1a4bbc884c21deb..985185db7fbd8d8a9d6677283f992a468e8854d7 100644
--- a/B-evenements.md
+++ b/B-evenements.md
@@ -4,6 +4,7 @@
## Sommaire <!-- omit in toc -->
- [B.1. Rappels](#b1-rappels)
- [B.2. La gestion du menu](#b2-la-gestion-du-menu)
+- [B.3. Navigation en JS](#b3-navigation-en-js)
- [Étape suivante](#Étape-suivante)
@@ -39,10 +40,18 @@ Dans le fichier `main.js` :
4. **Ajoutez la classe CSS "active" sur la balise `<li>` qui contient le lien qui a été cliqué** (utilisez pour cela la propriété [element.parentElement](https://developer.mozilla.org/en-US/docs/Web/API/Node/parentElement))
5. **Juste avant d'ajouter la classe "active" sur le lien cliqué, effacez les classes CSS du `<li>` du menu qui était précédemment actif** de manière à n'avoir qu'un seul lien actif à la fois<br><img src="./images/pizzaland-nav.gif">
-<!--## B.3. Navigation en JS
+## B.3. Navigation en JS
Il existe plusieurs façons de gérer la navigation en JS.
-On peut afficher/masquer des parties de code HTML déjà
--->
+On peut soit générer du code HTML entièrement en JS et l'injecter dans la page (comme on le fait pour la `HomePage`) soit se contenter d'afficher/masquer des portions de la page déjà présentes dans le code html. **C'est cette deuxième technique que l'on va maintenant travailler.**
+
+1. Inspectez le code du fichier `index.html` : vous remarquerez qu'à la fin de la balise `<header>` se trouve une balise masquée (`display:none`) :
+ ```html
+ <section class="newsContainer" style="display:none">...</section>
+ ```
+2. Dans `main.js` rendez cette section visible à l'écran à l'aide de la méthode `setAttribute()`. <br>
+ *En CSS, pour afficher une balise qui est en `display:none`, on peut remplacer la valeur de `display` par `initial`.*
+3. Faites en sorte qu'au clic sur le bouton `<button class="closeButton">` la section soit à nouveau masquée
+
## Étape suivante
Maintenant que l'on est capable de détecter les actions de l'utilisateur nous allons travailler sur la gestion des formulaires dans le prochain exercice : [C. Les formulaires](./C-formulaires.md).
\ No newline at end of file
diff --git a/css/main.css b/css/main.css
index 1173301ba34ceb4abeb19e48fc98816a0cfe52ed..26901f65fc113f19f20a39218fea72cec27b3fbd 100644
--- a/css/main.css
+++ b/css/main.css
@@ -143,4 +143,141 @@ form label input,
form label select,
form label .form-control {
width: 70%;
+}
+
+.jumbotron {
+ padding: 20px 60px;
+ background-color: #e2e8e9;
+ background-image: url('../images/bg.png');
+ background-size: cover;
+ background-position: center;
+ animation: fadeIn .8s ease, slide 1.2s cubic-bezier(.190, 1.000, .220, 1.000);
+ animation-delay: .1s;
+ animation-fill-mode: both;
+ overflow: hidden;
+ position: relative;
+}
+.jumbotron .closeButton {
+ position: absolute;
+ right: 20px;
+ top: 20px;
+ width: 40px;
+ height: 40px;
+ border: none;
+ background: none;
+ transform: rotate(-45deg);
+ transform-origin: center;
+ transition: all .3s ease;
+}
+.jumbotron .closeButton:hover {
+ transform: scale(1.2) rotate(135deg);
+}
+
+.jumbotron .closeButton:before,
+.jumbotron .closeButton:after {
+ content: '';
+ border-radius: 3px;
+ position: absolute;
+ top:50%;
+ left: 10px;
+ right: 10px;
+ border: 2px black solid;
+ transform-origin: center;
+ transform: translateY(-2px);
+}
+.jumbotron .closeButton:after {
+ transform: translateY(-2px) rotate(90deg);
+}
+.jumbotron .spicy{
+ font-size:130%;
+ background: linear-gradient(-55deg, #cd1a1e 0%,#faa119 40%, #fecf0a 50%, #faa119 60%, #cd1a1e 100%);
+ background-size: 200% 200%;
+ white-space: nowrap;
+ color: #cd1a1e;
+ background-clip: text;
+ text-fill-color: transparent;
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+
+}
+.jumbotron .spicy:hover {
+ animation: slideBg .1s linear infinite;
+}
+.jumbotron .spicy:hover .spicy-icon{
+ animation: burn .01s linear infinite;
+}
+.jumbotron h1, .jumbotron p {
+ animation: fadeIn .6s ease, slide .4s cubic-bezier(.190, 1.000, .220, 1.000);
+ animation-delay: .4s;
+ animation-fill-mode: both;
+}
+.jumbotron p {
+ animation-delay: .5s;
+}
+.jumbotron .spicy-icon {
+ height:50px;
+ vertical-align: baseline;
+ transform-origin: bottom left;
+}
+@keyframes slideBg {
+ 100% {
+ background-position: -200% center;
+ }
+}
+@keyframes burn {
+ 100% {
+ transform: skew(-13deg);
+ }
+}
+@keyframes fadeIn {
+ 0% {
+ opacity: 0;
+ }
+ 100% {
+ opacity: 1;
+ }
+}
+@keyframes slide {
+ 0% {
+ transform: translateX(-300px);
+ }
+}
+.is-loading {
+ position:relative;
+ min-height: 200px;
+}
+.is-loading * {
+ display: none;
+}
+.is-loading:before {
+ content: '';
+ position: absolute;
+ top:0;
+ left:0;
+ right:0;
+ bottom:0;
+ background-color: rgba(0,0,0,.1);
+ z-index: 1;
+}
+.is-loading:after {
+ content: ' ';
+ position: absolute;
+ top:50%;
+ left:50%;
+ width: 50px;
+ height: 50px;
+ border: 1px black solid;
+ border-top-color: rgba(0,0,0,.3);
+ z-index: 2;
+ border-radius: 50%;
+ animation: rotate .5s linear infinite;
+ transform-origin: center;
+}
+@keyframes rotate {
+ 0% {
+ transform: translate(-50%,-50%) rotate(0deg);
+ }
+ 100% {
+ transform: translate(-50%,-50%) rotate(360deg);
+ }
}
\ No newline at end of file
diff --git a/images/bg.png b/images/bg.png
new file mode 100644
index 0000000000000000000000000000000000000000..2e9b88b936cba2b0e0f4ae3121bd021173a3587c
Binary files /dev/null and b/images/bg.png differ
diff --git a/images/hot.svg b/images/hot.svg
new file mode 100644
index 0000000000000000000000000000000000000000..fe88741f6ee9597af89c9a21cae57671b8a9f431
--- /dev/null
+++ b/images/hot.svg
@@ -0,0 +1,47 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 15.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ width="115.333px" height="136.334px" viewBox="0 0 115.333 136.334" enable-background="new 0 0 115.333 136.334"
+ xml:space="preserve">
+<g id="Calque_1">
+ <g>
+ <g>
+ <g>
+
+ <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="-120.4673" y1="76.7539" x2="-120.2131" y2="-97.4448" gradientTransform="matrix(-0.7645 -0.6446 -0.6446 0.7645 -39.8141 8.3878)">
+ <stop offset="0.1515" style="stop-color:#EE2A24"/>
+ <stop offset="0.2463" style="stop-color:#EE3624"/>
+ <stop offset="0.3931" style="stop-color:#F04E23"/>
+ <stop offset="0.5734" style="stop-color:#F36D21"/>
+ <stop offset="0.7803" style="stop-color:#F7901E"/>
+ <stop offset="1" style="stop-color:#FEBC11"/>
+ </linearGradient>
+ <path fill="url(#SVGID_1_)" d="M2.831,84.858C4.342,67.731,14.158,55.142,24,49c21.133-13.189,40-9,62.571-22.013
+ c7.435-4.286,17.434-15.991,17.493-24.553c3.27,7.57,6.637,17.843,7.494,25.345c1.748,15.303-7.402,41.189-24.854,63.281
+ c7.341,0.693,13.481-4.11,17.125-9.022c0.707,8.582-2.574,17.8-6.907,24.122c-15.751,21.64-50.245,40.313-78.135,18.924
+ C-0.473,108.846,2.831,84.858,2.831,84.858z"/>
+ </g>
+ </g>
+ <g>
+
+ <linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="-102.1831" y1="-9.9224" x2="-165.6147" y2="55.8514" gradientTransform="matrix(-0.7645 -0.6446 -0.6446 0.7645 -39.8141 8.3878)">
+ <stop offset="0.0182" style="stop-color:#FECF0A"/>
+ <stop offset="0.3939" style="stop-color:#FDB515"/>
+ <stop offset="0.5036" style="stop-color:#F9A01B"/>
+ <stop offset="0.8447" style="stop-color:#F26122"/>
+ <stop offset="1" style="stop-color:#EF4023"/>
+ </linearGradient>
+ <path fill="url(#SVGID_2_)" d="M14.9,117.302c-6.221-7.863-8.247-18.927-5.319-27.762c5.003-16.125,20.216-23.054,35.638-26.329
+ c8.197-1.678,18.29-2.292,26.139-5.168c3.814-1.305,7.715-3.257,10.948-6.349c-0.187,9.336-1.18,20.169-2.869,29.145
+ c-3.058,15.958-8.719,30.178-22.097,40.147c-12.225,9.135-25.57,7.922-37.489,0.492L14.9,117.302z"/>
+ </g>
+ </g>
+</g>
+<g id="Calque_2">
+ <circle stroke="#000000" stroke-width="3" stroke-miterlimit="10" cx="26.667" cy="89.667" r="3"/>
+ <circle stroke="#000000" stroke-width="3" stroke-miterlimit="10" cx="58.667" cy="89.667" r="3"/>
+ <path fill="none" stroke="#000000" stroke-width="3" stroke-linecap="round" stroke-miterlimit="10" d="M50.167,99.25
+ c0,4.28-3.47,7.75-7.75,7.75s-7.75-3.47-7.75-7.75"/>
+</g>
+</svg>
diff --git a/index.html b/index.html
index 216d5c3b5539a91a1d6a83f3319d832ab1554c1f..561386efdf68e9feaa11c7bfa80980d86dd82b87 100644
--- a/index.html
+++ b/index.html
@@ -30,6 +30,13 @@
</ul>
</div>
</nav>
+ <section class="newsContainer" style="display:none">
+ <article class="jumbotron">
+ <button class="closeButton"></button>
+ <h1>Welcome to PizzaLand !</h1>
+ <p>Bienvenue sur notre magnifique catalogue de pizzas !</p>
+ </article>
+ </section>
</header>
<section class="row marketing">
<div class="col-lg-12">