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