index page at user Journey + js close nav

assets/css/style.css

@@ -25,28 +25,44 @@
   src: url('../fonts/QueensidesMedium-x30zV.ttf');
 }
 
-:root {
-  --color-bg: #77A3D2;
+*,
+:after,
+:before {
+  box-sizing: border-box;
+  margin: 0;
 }
+
+:root {
+  --color-bg-head: #77A3D2;
+}
+
 html {
   scroll-behavior: smooth;
 }
-body {
-  line-height: 1.5;
-}
+
+
 @media(prefers-color-scheme: dark) {
   :root {
-    --color-bg: #573138;
+    --color-bg-head: #77A3D2;
+    --color-bg: white;
+    --color-bg-sctn-pink: #EDCCE7;
+    --color-bg-sctn-green: #CDFB52;
+    --color-bg-sctn-blue: #52f8fb;
+    --color-bg-sctn-fuscia: #FF00C7;
+    --color-active: #FF00C7;
+    --color-visited: #573138;
+    --color-hover: #EDCCE7;
   }
 
   [data-theme="light"] {
-    --color-bg: #94beeb;
+    --color-bg: white;
     --color-txt: #001f1f;
   }
 
   [data-theme="dark"] {
-    --color-bg: #4a3157;
-    --color-txt: #001f1f;
+    --color-bg: #000000;
+    --color-txt: #ffffff;
+    --color-txt-b: #000000;
   }
 }
 
@@ -58,6 +74,16 @@ body {
   display: inline;
 }
 
+body {
+  font-family: 'QueensidesM';
+  font-size: 18px;
+  color: var(--color-txt);
+  padding: 0;
+  margin: 0;
+  line-height: 1.5;
+  background-color: var(--color-bg);
+}
+
 .logoDWT__dark-mode {
   display: none;
 }
@@ -67,12 +93,11 @@ body {
 }
 
 
-/*Grid*/
+
 /*GRID*/
 .grid {
   display: grid;
   grid-template-columns: 1fr 6fr 6fr 1fr;
-  grid-template-rows: 125px repeat(1, 1fr);
   padding-left: 30px;
   padding-right: 30px;
   gap: 3em 20px;
@@ -85,7 +110,8 @@ body {
 .grid>figure {
   margin: 0;
 }
-.grid__discu{
+
+.grid__discu {
   display: grid;
   grid-template-columns: 3fr 4fr 4fr 3fr;
   grid-template-rows: 125px repeat(1, 1fr);
@@ -127,14 +153,6 @@ body {
   grid-column-end: 4;
 }
 
-body {
-  font-family: 'QueensidesM';
-  font-size: 18px;
-  color: var(--color-txt);
-  padding: 0;
-  margin: 0;
-}
-
 .grid__title {
   display: grid;
   grid-template-columns: 1fr;
@@ -142,85 +160,39 @@ body {
   padding-right: 30px;
   gap: 3em 20px;
 }
-.grid--content{
+
+.grid--content {
   gap: 9em 20px;
 }
-.title {
-  font-size: 32px;
-  margin-top: 2rem;
-  text-align: center;
-  font-family: 'moodboardFont';
-  font-weight: 400;
-}
 
+/*HEADER*/
 
-p {
-  font-size: 20px;
-}
-
-.partie1_blackfill {
-  padding: 1.25em 18px;
-  display: inline;
-  background: #000000;
-  color: #ffffff;
-  box-shadow: .5em 0 0 #FF00C7, -.5em 0 0 #FF00C7;
-  max-width: 22ch;
-  line-height: 1.5;
-}
-
-img {
-  max-width: 100%;
-  min-width: 100%;
-}
-
-.image_undertxt {
-  object-fit: cover;
-  width: 100%;
-  margin: 4rem 0rem 1rem 0rem;
-}
-
-.strip {
-  box-sizing: border-box;
-  width: 48vh;
-  height: 4em;
-  z-index: -1;
-  position: absolute;
-}
-
-.strip--1 {
-  top: 63em;
-  transform: skew(30deg) rotate(30deg);
-  background-color: #FF00C7;
-}
-
-.strip--2 {
-  top: 73em;
-  transform: skew(-30deg) rotate(-30deg);
-  background-color: #FF00C7;
-}
-
-.strip--3 {
-  top: 83em;
-  transform: skew(30deg) rotate(30deg);
-  background-color: #FF00C7;
-}
-
-.strip--cash {
-  top: 113em;
-  max-width: 100%;
-  background-image: url(/assets/images/stripeuro.png);
-  background-size: cover;
-  filter: invert(1);
-}
-
-.list--header,
-.list--footer,
-.list {
-  text-decoration: none;
-  list-style: none;
+body[data-menu] .list__m--header {
+  margin-top: 30px;
   display: flex;
-  gap: 50px;
+  flex-direction: column;
+  align-items: center;
+  gap: 3em;
   padding: 0;
+  padding-top: 1em;
+  list-style: none;
+}
+
+body[data-menu] .mlink--header,
+.link--header {
+  font-size: 28px;
+  color: var(--color-link);
+}
+
+.btn--burger {
+  z-index: 4;
+  outline: none;
+  cursor: pointer;
+  border: none;
+  background-color: #9c6b5ca3;
+  padding: 2vh 2vh 2vh 2vh;
+  border-radius: 4px;
+  position: fixed;
 }
 
 header {
@@ -238,7 +210,7 @@ header {
   padding-bottom: 100%;
   padding-top: 18vh;
   background-image: url(../images/background.png);
-  background-color: var(--color-bg);
+  background-color: var(--color-bg-head);
   filter: contrast(130%);
 }
 
@@ -246,6 +218,10 @@ header {
   max-width: 100%;
 }
 
+.headtitle h1 {
+  visibility: hidden;
+}
+
 .header__linklogo {
   position: relative;
   width: 69px;
@@ -296,7 +272,7 @@ header {
 
 /*Header*/
 .header__btn--theme {
-  color: var(--color-bg);
+  color: var(--color-bg-head);
   width: 35px;
   height: 35px;
   background-color: transparent;
@@ -339,35 +315,261 @@ header {
   width: 100%;
   height: auto;
 }
-.discu__el{
+
+.title {
+  font-size: 47px;
+  margin-top: 2rem;
+  text-align: center;
+  font-family: 'moodboardFont';
+  font-weight: 300;
+  background: black;
+  margin-left: -7vw;
+  margin-right: -17vw;
+  color: white;
+  text-transform: uppercase;
+}
+
+
+p {
+  font-size: 20px;
+}
+
+.partie1_blackfill {
+  padding: 1.25em 18px;
+  display: inline;
+  background: #000000;
+  color: #ffffff;
+  box-shadow: .5em 0 0 #FF00C7, -.5em 0 0 #FF00C7;
+  max-width: 22ch;
+}
+
+img {
+  max-width: 100%;
+  min-width: 100%;
+  float: left;
+}
+
+.element_dot {
+  text-align: center;
+}
+
+.slide {
+  overflow-x: scroll;
+  width: auto !important;
+  height: 542px;
+  overflow-y: hidden;
+}
+
+.image_slide {
+  min-width: 236vh;
+  float: left;
+  height: 108vh;
+}
+
+.image_undertxt {
+  object-fit: cover;
+  max-width: 100%;
+  min-width: 100%;
+  float: left;
+  height: 100%
+}
+
+.image_undertxt--iv {
+  filter: invert(1);
+}
+
+.image_undertxt--slide {
+  height: 354px;
+}
+
+.strip {
+  box-sizing: border-box;
+  width: 90%;
+  height: 4em;
+  z-index: -1;
+  position: absolute;
+  margin-left: -19px;
+}
+
+.strip--1 {
+  top: 55em;
+  transform: skew(30deg) rotate(30deg);
+  background-color: #FF00C7;
+}
+
+.strip--2 {
+  top: 82em;
+  transform: skew(-30deg) rotate(-30deg);
+  background-color: #FF00C7;
+}
+
+.strip--3 {
+  top: 109em;
+  transform: skew(30deg) rotate(30deg);
+  background-color: #FF00C7;
+}
+
+.strip--cash {
+  max-width: 100%;
+  background-image: url(/assets/images/stripeuro.png);
+  background-size: cover;
+  filter: invert(1);
+  margin-top: -19em;
+  position: static;
+}
+
+.highlight {
+  background: linear-gradient(120deg, #c7e4a0 0%, #bbe2ff 100%);
+  background-repeat: no-repeat;
+  background-size: 100% 20%;
+  background-position: 0 60%;
+}
+
+.miroframe {
+  max-width: 100%;
+  min-width: 100%;
+  padding: 1em;
+}
+
+.list--header,
+.list--footer,
+.list {
+  text-decoration: none;
+  list-style: none;
+  display: flex;
+  gap: 50px;
+  padding: 0;
+}
+
+body[data-menu] .header__navigation--m {
+  position: fixed;
+  top: -57px;
+  padding-top: 0px;
+  width: 48%;
+  height: 122%;
+  background: #77a3d2b5;
+  transform: translatex(0%);
+  transition: transform 0.3s ease-out;
+  display: flex;
+  flex-direction: column;
+  backdrop-filter: blur(15px);
+  margin-top: -4em;
+  z-index: 2;
+}
+
+.discu__el {
   text-decoration: none;
   border-radius: 25px;
   display: inline-flex;
   align-items: center;
   margin-top: 1em;
+  border-radius: 3px;
 }
-.discu__el--pink{
+
+.discu__el--pink {
   background-color: #ff00c84b;
   padding: 2rem;
-  margin-right: 1em;
+  margin-left: -4em;
+  margin-right: 3em;
 }
-.discu__el--blue{
+
+.discu__el--green {
   background-color: #5eff004d;
   padding: 2rem;
-  margin-left: 1em;
+  margin-right: -4rem;
+
 }
-.discu__el--green{
+
+.discu__el--blue {
   background-color: #00b3ff4b;
   padding: 2rem;
-  margin-right: 1em;
+  margin-left: -3em;
+  margin-right: -3rem;
 }
-.content__objet{
-  background-color: #ffdcf7;
-  margin-left: -2em;
-  margin-right: -4em;
-  padding: 3em;
+
+
+.content__objet {
+  background-color: #CDFB52;
+  margin-left: 0em;
+  margin-right: -3rem;
+  padding: 1em;
   line-height: 1.45;
+  color: var(--color-txt-b);
 }
+
+.section__color {
+  margin-top: 3em;
+  padding-bottom: 4em;
+}
+
+.section__color--pink {
+  background-color: #ff00c84b;
+}
+
+.section__color--green {
+  background-color: #CDFB52;
+  color: var(--color-txt-b);
+}
+
+.section__color--blue {
+  background-color: #B4E9FF;
+  color: var(--color-txt-b);
+}
+
+/* Slideshow container */
+.slideshow-container {
+  max-width: 1000px;
+  position: relative;
+  margin: auto;
+}
+
+.slide_set {
+  margin-bottom: 2em;
+}
+
+/* Caption text */
+.text {
+  color: #f2f2f2;
+  font-size: 15px;
+  padding: 8px 12px;
+  position: absolute;
+  bottom: 8px;
+  width: 100%;
+  text-align: center;
+}
+
+/* The dots/bullets/indicators */
+.dot {
+  height: 15px;
+  width: 15px;
+  margin: 0 2px;
+  background-color: #bbb;
+  border-radius: 15%;
+  text-align: center;
+  display: inline-block;
+  transition: background-color 0.6s ease;
+}
+
+.active {
+  background-color: var(--color-active);
+}
+
+/* Fading animation */
+.fade {
+  animation-name: fade;
+  animation-duration: 0.5s;
+}
+
+@keyframes fade {
+  from {
+    opacity: .4
+  }
+
+  to {
+    opacity: 1
+  }
+}
+
 .reseaux__el {
   text-decoration: none;
   border-radius: 25px;
@@ -393,67 +595,160 @@ header {
   pointer-events: none;
 }
 
-body[data-menu] .header__navigation--m {
-  position: fixed;
-  top: -20px;
-  padding-top: 80px;
-  width: 100%;
-  height: 100%;
-  background: #77a3d21f;
-  transform: translatex(0%);
-  transition: transform 0.3s ease-out;
-  display: flex;
-  flex-direction: column;
-  backdrop-filter: blur(15px);
-  margin-top: 1em;
-  z-index: 2;
+.section__color--slot {
+  box-shadow: 13em 2em 11em -2em #EDCCE7;
+  padding: 10px;
+  margin-bottom: 15px;
 }
 
-body[data-menu] .list__m--header {
-  margin-top: 30px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 8em;
-  padding: 0;
-  padding-top: 1em;
-  list-style: none;
+.details[open] {
+  border-radius: 5%;
 }
 
-body[data-menu] .mlink--header,
-.link--header {
-  font-size: 28px;
-  color: var(--color-link);
+.details__QR>ul> :nth-child(even) {
+  margin-left: 30px;
+  margin-top: -10px;
+  font-style: italic;
 }
 
-body[data-menu] .mlink--active,
-.link--active {
-  border-bottom: solid 3px #84C4CE;
-  color: var(--color-linky-active);
+.title__slot {
+  font-size: 25px;
 }
 
-.btn--burger {
-  z-index: 4;
-  outline: none;
-  cursor: pointer;
-  border: none;
-  background-color: #9c6b5ca3;
-  padding: 2vh 2vh 2vh 2vh;
-  border-radius: 5px;
-  position: fixed;
-  box-shadow: 1px 3px 1px 1px #000000;
+h3 {
+  font-size: 25px;
+}
+
+.guide__el {
+  list-style: " → ";
+  font-size: 26px;
+  margin-left: -2em;
+}
+
+.guide__liste {
+  list-style: " — ";
 }
 
 @media only screen and (min-width: 750px) {}
 
+.header__navigation {
+  margin-left: 30px;
+  display: flex;
+  z-index: 3;
+}
+
+body[data-menu] .list__m--header {
+  display: none;
+}
+
+body[data-menu] .header__navigation--m {
+  display: none;
+}
+
 @media only screen and (min-width: 1024px) {
+
+  /*GRID*/
+  .grid {
+    display: grid;
+    grid-template-columns: 1fr 6fr 6fr 1fr;
+    padding-left: 0;
+    padding-right: 0;
+    gap: 3em 20px;
+  }
+
+  .grid>* {
+    grid-column: 1/-1;
+  }
+
+  .grid>figure {
+    margin: 0;
+  }
+
+  .grid__discu {
+    display: grid;
+    grid-template-columns: 1fr 3fr 3fr 3fr 3fr 1fr;
+    grid-template-rows: 125px repeat(1, 1fr);
+    padding-left: 30px;
+    padding-right: 30px;
+    gap: 3em 20px;
+    margin-top: 2em;
+  }
+
+
+  .dgrid-start01 {
+    grid-column-start: 1;
+  }
+
+  .dgrid-start02 {
+    grid-column-start: 2;
+  }
+
+  .dgrid-start03 {
+    grid-column-start: 3;
+  }
+
+  .dgrid-start04 {
+    grid-column-start: 4;
+  }
+
+  .dgrid-start05 {
+    grid-column-start: 5;
+
+  }
+
+  .dgrid-start06 {
+    grid-column-start: 5;
+
+  }
+
+  .dgrid-end01 {
+    grid-column-end: 1;
+  }
+
+  .dgrid-end02 {
+    grid-column-end: 2;
+  }
+
+  .dgrid-end03 {
+    grid-column-end: 3;
+  }
+
+  .dgrid-end04 {
+    grid-column-end: 4;
+  }
+
+  .dgrid-end05 {
+    grid-column-end: 5;
+  }
+
+  .dgrid-end06 {
+    grid-column-end: 6;
+  }
+
+  .dgrid-end07 {
+    grid-column-end: 7;
+  }
+
+  .grid__title {
+    display: grid;
+    grid-template-columns: 1fr;
+    padding-left: 30px;
+    padding-right: 30px;
+    gap: 3em 20px;
+  }
+
+  .grid--content {
+    gap: 9em 20px;
+  }
+
+  /*HEADER*/
   header {
     display: flex;
     margin-top: auto;
     position: fixed;
     width: 100%;
     z-index: 2;
-    height: 10%;
+    height: 19%;
     top: 0em;
   }
 
@@ -463,15 +758,86 @@ body[data-menu] .mlink--active,
     z-index: 3;
   }
 
-  .hero {
-    background-color: coral;
-    background-image: url(/assets/images/backgroundv3.png);
-    padding-top: 200px;
-    padding-bottom: 200px;
 
+  body[data-menu] .list__m--header {
+    display: none;
+  }
+
+  body[data-menu] .header__navigation--m {
+    display: none;
+  }
+
+  /*Natif Heading*/
+  .title {
+    margin-right: 0;
+    font-size: 75px;
+  }
+
+  p {
+    max-width: 65ch;
+  }
+  figcaption {
+    font-size: 23px;
+  }
+  .img__content {
+    padding-bottom: 3em;
+  }
+
+  .content__objet {
+    margin-left: -1em;
+    margin-right: -1rem;
+  }
+
+  .partie1_blackfill {
+    max-width: 57ch;
+    padding: 2.25em 18px;
   }
 
   .fond {
-    padding-top: 0vh;
+    padding-bottom: 100%;
+    padding-top: 120vh;
+  }
+
+  .btn--burger {
+    display: none;
+  }
+
+  /*STRIP*/
+  .strip {
+    box-sizing: border-box;
+    width: 90%;
+    height: 11em;
+    z-index: -1;
+    position: absolute;
+    margin-left: 3vw;
+  }
+
+  .strip--1 {
+    top: 127em;
+    transform: skew(30deg) rotate(30deg);
+    background-color: #FF00C7;
+  }
+
+  .strip--2 {
+    top: 175em;
+  }
+  .discu__liste{
+    margin-left: 10rem;
+    margin-right: 25em;
+  }
+  .discu__el {
+    display: flex;
+  }
+  .discu__el--pink {
+    padding: 3rem;
+  }
+  .discu__el--green {
+    padding: 3rem;
+  }
+  .discu__el--blue {
+    padding: 3rem;
+  }
+  .grid--mega {
+    grid-template-columns: 1fr 6fr 6fr 6fr 5fr 4fr 1fr;
   }
 }

assets/js/app.js

@@ -44,9 +44,47 @@ function toggleNavigation() {
  }
 }
 
+//BURGER MENU // FERMER NAV QUAND ON CLIQUE SUR UN LIEN // 
+
+let closeMenu = document.querySelector(".list__m--header");
+
+if(closeMenu){
+
+closeMenu.addEventListener("click", MenuList);
+
+
+    function MenuList (){
+        if(!document.body.hasAttribute("data-menu")){
+            document.body.setAttribute("data-menu", false);
+        } else {
+            document.body.removeAttribute("data-menu");
+        }
+    }
+
+}
 
 // date copyright
 let answerDate = document.querySelector(".date");
 let today = new Date();
 let year = today.getFullYear();
 answerDate.innerHTML = year;
+
+let slideIndex = 0;
+showSlides();
+
+function showSlides() {
+  let i;
+  let slides = document.getElementsByClassName("mySlides");
+  let dots = document.getElementsByClassName("dot");
+  for (i = 0; i < slides.length; i++) {
+    slides[i].style.display = "none";  
+  }
+  slideIndex++;
+  if (slideIndex > slides.length) {slideIndex = 1}    
+  for (i = 0; i < dots.length; i++) {
+    dots[i].className = dots[i].className.replace(" active", "");
+  }
+  slides[slideIndex-1].style.display = "block";  
+  dots[slideIndex-1].className += " active";
+  setTimeout(showSlides, 2000); // Change image every 2 seconds
+}

index.html

@@ -89,13 +89,31 @@
 
                     <ul class="list--header">
                         <li>
-                            <a class="link link--header link--active" href="#partie0">Partie //01</a>
+                            <a class="link link--header" href="#partie0">//00</a>
                         </li>
 
                         <li>
-                            <a class="link link--header" href="#partie1">Partie //02</a>
+                            <a class="link link--header" href="#partie1">//01</a>
+                        </li>
+                        <li>
+                            <a class="link link--header" href="#partie2">//02</a>
                         </li>
 
+                        <li>
+                            <a class="link link--header" href="#partie3">//03</a>
+                        </li>
+                        <li>
+                            <a class="link link--header" href="#partie4">//04</a>
+                        </li>
+                        <li>
+                            <a class="link link--header" href="#partie5">//05</a>
+                        </li>
+                        <li>
+                            <a class="link link--header" href="#partie6">//06</a>
+                        </li>
+                        <li>
+                            <a class="link link--header" href="#partie7">//07</a>
+                        </li>
                     </ul>
 
                 </nav>
@@ -109,74 +127,297 @@
     <div class="header__navigation--m">
         <ul class="list__m--header">
             <li>
-                <a class="link mlink--header mlink--active" href="#partie0">Partie //01</a>
+                <a class="link link--header" href="#partie0">Partie //00</a>
             </li>
 
             <li>
-                <a class="link mlink--header" href="#partie1">Partie //02</a>
+                <a class="link link--header" href="#partie1">Partie //01</a>
+            </li>
+            <li>
+                <a class="link link--header" href="#partie2">Partie //02</a>
+            </li>
+
+            <li>
+                <a class="link link--header" href="#partie3">Partie //03</a>
+            </li>
+            <li>
+                <a class="link link--header" href="#partie4">Partie //04</a>
+            </li>
+            <li>
+                <a class="link link--header" href="#partie5">Partie //05</a>
+            </li>
+            <li>
+                <a class="link link--header" href="#partie6">Partie //06</a>
+            </li>
+            <li>
+                <a class="link link--header" href="#partie7">Partie //07</a>
             </li>
         </ul>
     </div>
-    <section class="headback">
+    <div class="headback">
         <div class="fond">
-            <img class="headtitle" src="/assets/images/headlogo.png"></img>
+            <img class="headtitle" src="/assets/images/headlogo.png"
+                alt="illustration portant les initiales de l'atelier Rethinking User Experience. RUX">
         </div>
-        <!--<pre class="language-css" tabindex="0"><code class="language-css"><span class="token selector">.awesome-layouts</span> <span class="token punctuation">{</span>
-        <span class="token property">display</span><span class="token punctuation">:</span> grid<span class="token punctuation">;</span>
-       <span class="token punctuation">}</span></code></pre>-->
-    </section>
-    <section class="grid">
+    </div>
+    <section class="grid grid--content">
         <div class="strip strip--1"></div>
-        <h1 class=" title mgrid-start01 mgrid-end04" id="partie0">Phase 0 : Synopsis</h1>
-        <p class="mgrid-start01 mgrid-end04 partie1_blackfill">L’atelier RUX <strong>(rethinking UX)</strong> est de
+        <h1 class="title mgrid-start01 mgrid-end04 dgrid-start01 dgrid-end06" id="partie0">Synopsis</h1>
+        <p class="mgrid-start01 mgrid-end04 dgrid-start04 dgrid-end06 partie1_blackfill">L’atelier RUX (rethinking UX)
+            est de
             réaliser une interface adaptée et
             compréhensible pour
             l’utilisateur, pour une
             navigation facile et rapide”</p>
         <div class="strip strip--2"></div>
-        <p class="mgrid-start02 mgrid-end05 partie1_blackfill">Le directeur de la Haute école Albert Jacqard nous à
+        <p class="mgrid-start02 mgrid-end05 dgrid-start05 dgrid-end06 partie1_blackfill">Le directeur de la Haute école
+            Albert Jacquard nous à
             donner une mission ! </p>
         <div class="strip strip--3"></div>
-        <p class="mgrid-start01 mgrid-end04 partie1_blackfill">Repenser notre cours de récré</p>
-        <figure class="img__content">
-            <img class="image_undertxt" src="assets/images/plancour.png" srcset="assets/images/plancour@2x.png 2x"
-                alt="plan de la cour de la Haute École Albert Jacquard" loading="lazy" decoding="async">
+        <p class="mgrid-start01 mgrid-end04 dgrid-start03 dgrid-end05 partie1_blackfill">Repenser notre cours de récré
+        </p>
+        <p class="mgrid-start01 mgrid-end04 dgrid-start02 dgrid-end06 partie1_blackfill">Notre budget est limité à 200k€
+            +-</p>
+        <div class="strip strip--cash"></div>
+        <figure class="img__content dgrid-start04 dgrid-end06">
+            <img class="image_undertxt image_undertxt--iv" src="assets/images/plancour.png"
+                srcset="assets/images/plancour@2x.png 2x" alt="plan de la cour de la Haute École Albert Jacquard"
+                loading="lazy" decoding="async">
             <figcaption class="figcaption">schéma illustré de la cour</figcaption>
         </figure>
-        <div class="strip strip--cash"></div>
-        <p class="mgrid-start01 mgrid-end04 partie1_blackfill">Notre budget est limité à 200k€ +-</p>
-        <figure class="img__content">
+        <figure class="img__content dgrid-start02 dgrid-end05">
             <img class="image_undertxt" src="assets/images/cour.png" srcset="assets/images/cour@2x.png 2x"
                 alt="plan de la cour de la Haute École Albert Jacquard" loading="lazy" decoding="async">
             <figcaption class="figcaption">Photo prise de la cour "plan large"</figcaption>
         </figure>
     </section>
-
-    <p class="grid__discu">
+    <section class="grid">
         <h2 class="title mgrid-start01 mgrid-end04" id="partie1">Création de l'Équipe</h2>
-    <div class="mgrid-start01 mgrid-end04">
+        <div class="mgrid-start01 mgrid-end04 dgrid-start02 dgrid-end05">
             <ul class="discu__liste">
-            <li class="discu__el discu__el--pink">— On choisit quel nom pour la Team ?</li>
-            <li class="discu__el discu__el--blue">— Les Rases moquettes en référence au fait qu’on va réajuster la cour
-                !</li>
-            <li class="discu__el discu__el--green">— Hahahahaha, allez !
+                <li class="discu__el discu__el--pink"> On choisit quel nom pour la Team ? (Célia)</li>
+                <li class="discu__el discu__el--green">— Les Rases moquettes en référence au fait qu’on va réajuster la
+                    cour
+                    ! (Pina)</li>
+                <li class="discu__el discu__el--blue">— Hahahahaha, allez ! (Amandine, Célia, Jessy, Justin et Pina)
                 </li>
-            <li class="discu__el">On se met au boulot !</li>
             </ul>
         </div>
-    <div class="grid grid--content">
-        <p class="mgrid-start01 mgrid-end04">Pour bien commencer n’importe quel projet il faut avant tout … un client ! Le client nous a demandé de
-            concevoir et repenser l’agencement de la cour de l’école, cependant il nous a donné des contraintes et a
-            répondu à certaines de nos questions.</p>
-            <p class="mgrid-start02 mgrid-end04">Et c’est à ce moment précis que l’on a mis la première vitesse. Notre tout nouvel atelier consistait à
+    </section>
+    <section class="grid grid--mega section__color section__color--pink">
+        <h2 class="title mgrid-start01 mgrid-end04" id="partie2">Prémices</h2>
+        <p class="mgrid-start01 mgrid-end04 dgrid-start02 dgrid-end05">Et c’est à ce moment précis que l’on a mis la
+            première vitesse.</p>
+        <p class="dgrid-start04 dgrid-end06">Notre
+            tout nouvel atelier consistait à
             repenser l’usage de la cour en proposant des moyens d’agencement. Pour réaliser cela, on a eu recours à
             notre stratégie d’apprentissage ! </p>
-            <p class="mgrid-start01 mgrid-end04 content__objet">
-    La fusion d'un <mark>travail collaboratif</mark>, des travaux de recherches qui nous permettent d’aller découvrir le monde
-    extérieur et <mark>nos utilisateurs</mark> et le travail pratique, ainsi que la partie individuelle pour mettre en œuvre notre
-    site web, <mark>mon site web~</mark>,  qui représente le fruit de notre travail. On réalisera alors notre étude de cas ! Ou notre <mark>Case-study</mark> pour
-    faire plus élégant.</p>
-</div>
+        <p class="mgrid-start01 mgrid-end04 dgrid-start03 dgrid-end07 content__objet">
+            La fusion d'un <span class="highlight">travail collaboratif</span>, des travaux de recherches qui nous
+            permettent d’aller découvrir le monde
+            extérieur et <span class="highlight">nos utilisateurs</span> et le travail pratique, ainsi que la partie
+            individuelle pour mettre en œuvre notre
+            site web, qui représente le fruit de notre travail. On réalisera alors notre étude de cas ! Notre
+            <span class="highlight">Case-study</span> pour
+            faire plus élégant.
+        </p>
+    </section>
+    <section class="grid section__color section__color--green">
+        <h2 class="title mgrid-start01 mgrid-end04" id="partie3">Prémices bis</h2>
+        <p class="mgrid-start01 mgrid-end04">La première étape à été d'<span class="highlight">observer la
+                cour</span> afin d'avoir un visuel plus
+            globale sur la cour.</p>
+        <p> Une fois terminé, la classe qui était bavarde se retrouve tout de suite dans un silence le plus total.
+            J'écrivais beaucoup de questions que je pourrais poser au directeur. Seulement les questions n’ont pas
+            été posées dans un <span class="highlight">ordre précis.</span></p>
+        <p class="mgrid-start02 mgrid-end05">Le directeur, celui qui était censé répondre à nos questions, a
+            commencé à expliquer la situation. En faisant cela, il a transformé nos questions en réponses.</p>
+        <p>Voici les questions:</p>
+        <a href="https://miro.com/app/board/uXjVPsdXjzw=/?share_link_id=851619025509" target="_blank"
+            title="Sur Miro">Aller sur Miro</a>
+        <p class="mgrid-start01 mgrid-end05">
+            Les questions ont été posées au directeur. Il nous a expliqué son point de vue, sa vision des choses. Il
+            avait en tête de créer un axe qui nous permettrait de nous diriger plus facilement vers le Bâtiment A, B
+            et C. En gardant bien en tête que bien souvent, manque de place oblige sur les parkings, les gens se
+            parquent là. </p>
+        <p class="mgrid-start01 mgrid-end05">
+            Il imagine cela comme un Forum ( une zone de discussion). Où il y aurait la possibilité de manger, des
+            lieux d’exposition, déco des murs, activités, zone de
+            lecture. Distribution des diplômes. Lieu de concert. Boîte à livres. </p>
+    </section>
+    <section class="grid">
+        <h2 class="title mgrid-start01 mgrid-end04" id="partie4">Guide d'entretien</h2>
+        <p class="mgrid-start01 mgrid-end05">Alors pour cette étape, je suis partie du principe que je ne sais pas
+            ce qu'il faut pour résoudre ce besoin. Même si nos futurs utilisateurs sont des élèves comme moi et mes
+            camarades, il est important de comprendre <span class="highlight">les utilisateurs, leurs
+                raisonnements</span> comment ils utilisent la cour, leur temps libre.</p>
+        <p> Et pour cela, on prépare un <span class="highlight">guide d'entretien</span></p>
+        <details class="section__color--slot" open="">
+            <summary class="title__slot">Voici le guide d'entretiens en entier:</summary>
+            <ul class="guide__liste">
+                <li class="title--medium guide__el">Introduction :</li>
+                <li>Bonjour, nous sommes étudiants en deuxième année de l’option Web.
+                    Bienvenue et merci de bien vouloir participer à notre interview.
+                    Je vais te poser des questions sur ta vie en tant qu’étudiant. Toutes tes réponses seront
+                    correctes. Cette interview sera enregistrée, retranscrite et ne durera que 5min. Ta
+                    participation peut être anonyme. Nous n’utiliserons ces données que dans le cadre scolaire.
+                </li>
+
+                <li class="title--medium guide__el">Echauffement :</li>
+
+                <li>Peux-tu te présenter ? </li>
+                <li>Quels sont tes passe-temps ? </li>
+                <li>Kotes-tu sur Namur ? Sinon d'où viens-tu ? Comment viens-tu à l’école ?</li>
+                <li>Quels sont les indispensables d’un étudiant ? En dehors du cadre de l’école ou non ?</li>
+                <li>Que penses-tu de l’HEAJ et de ses environnements ?</li>
+
+                <li class="title--medium guide__el">Questions générales :</li>
+
+                <li>Si tu pouvais importer un élément de ton ancienne école dans l’HEAJ lequel serait-il ? </li>
+                <li>Dans quels endroits de l’école te sens-tu le moins à l’aise ?
+                </li>
+                <li>Dans quels endroits de l’école te sens-tu le moins à l’aise ? </li>
+                <li>Dans quels endroits extérieur te sens-tu le mieux ? Pourquoi ? </li>
+
+                <li class="title--medium guide__el">Approfondissement :</li>
+
+                <li>Si tu devais améliorer une partie de l’école, laquelle serait-il ? Pourquoi ? Comment ?
+                </li>
+                <li>Si tu avais une baguette magique, que changerais-tu par rapport à la cour de l’école ?</li>
+                <li>Tu pourrais nous faire un petit dessin de ta cour idéale ?
+                </li>
+                <li>Si ton dessin se réalisait, passerais-tu plus de temps dans la cour ?
+                </li>
+                <li class="title--medium guide__el">Clôture de l’entretien :</li>
+
+                <li>Nous t’avons posé des questions sur ta condition de vie en tant qu’étudiant ainsi que sur
+                    l’école. Aurais-tu quelque chose à rajouter ?
+                </li>
+                <li>Merci pour ta participation ! Bonne journée.</li>
+
+            </ul>
+        </details>
+        <details class="section__color--slot details__QR" open="">
+            <summary class="title__slot">Réponses généralisé:</summary>
+            <ul>
+                <li>Q : Que penses tu de l’HEAJ et de ses environnements ?</li>
+                <li>R : Les locaux sont mal indiqués, triste et <span class="highlight">manque de vie</span> dans
+                    l’école</li>
+                <li>Q : Si tu devais améliorer une partie de l’école, laquelle serait-il ? Pourquoi ? Comment ?
+                </li>
+                <li>R : <span class="highlight">Plus de vert</span>, retravailler les extérieurs avec des jeux </li>
+                <li>Q : Dans quels endroits extérieur te sens-tu le mieux ? Pourquoi ? </li>
+                <li>R : Là, où il y a de la <span class="highlight">verdure</span> et <span class="highlight">de la
+                        vie</span> en générale.</li>
+                <li>Q : Si tu avais une baguette magique, que changerais-tu dans la cour ?</li>
+                <li>R : Des tables, du sport, <span class="highlight">de la verdure.</span></li>
+                <li>Q : Si ton dessin se réalisait, passerais-tu plus de temps dans la cour ?
+                </li>
+                <li>R : oui principalement</li>
+            </ul>
+        </details>
+        <figure class="img__content">
+            <img class="image_undertxt" src="assets/images/interview.png" srcset="assets/images/interview@2x.png 2x"
+                alt="photo représentant une de nos interview" loading="lazy" decoding="async">
+            <figcaption class="figcaption">Une de nos plus belles interview</figcaption>
+        </figure>
+    </section>
+    <section class="grid section__color section__color--blue">
+        <h2 class="title mgrid-start01 mgrid-end04" id="partie5">Top Task & fonctions</h2>
+        <p class="mgrid-start01 mgrid-end05">Le résultat de interviews ont démontré que ce qui revenait souvent était la
+            volonté <span class="highlight">d’ajouter des verdures</span>, ainsi qu’un espace pour travailler. </p>
+        <p class="mgrid-start02 mgrid-end06">Suite à cela, on pouvait choisir quel
+            Top task nous intéressait le plus parmis celle qu'on aurait voté.</p>
+        <figure class="img__content">
+            <img class="image_undertxt" src="assets/images/votetop.png" srcset="assets/images/votetop@2x.png 2x"
+                alt="photo représentant une de nos interview" loading="lazy" decoding="async">
+            <figcaption class="figcaption">On avait droit à 3 votes maximum.😇</figcaption>
+        </figure>
+    </section>
+    <section class="grid section__color section__color--blue">
+        <h2 class="title mgrid-start01 mgrid-end04" id="partie6">Audits</h2>
+        <div class="slideshow-container">
+            <p class="mgrid-start01 mgrid-end05 slide_set">J'ai beaucoup aimé la préparations de nos audits. C'est à
+                dire chercher
+                un peu partout des idées venant des architectes, des passionés par de la récup pour créer des bancs, des
+                supports pour les plantes. Dans la <a href id="#partie7"> partie 7</a>, on y trouve mon croquis qui rentre en lien avec les images
+                ci-dessus.
+            </p>
+
+            <div class="mySlides fade">
+                <figure class="img__content img__content--slide">
+                    <img class="image_undertxt image_undertxt--slide" src="assets/images/plante.jpg"
+                        srcset="assets/images/plante@2x.png 2x" alt="photo représentant une de nos interview"
+                        loading="lazy" decoding="async">
+                </figure>
+            </div>
+
+            <div class="mySlides fade">
+                <figure class="img__content img__content--slide">
+                    <img class="image_undertxt image_undertxt--slide" src="assets/images/plante2.png"
+                        srcset="assets/images/plante2@2x.png 2x" alt="photo représentant une de nos interview"
+                        loading="lazy" decoding="async">
+                </figure>
+            </div>
+
+            <div class="mySlides fade">
+
+                <figure class="img__content img__content--slide">
+                    <img class="image_undertxt image_undertxt--slide" src="assets/images/plante.png"
+                        srcset="assets/images/plante3@2x.png 2x" alt="photo représentant une de nos interview"
+                        loading="lazy" decoding="async">
+                </figure>
+            </div>
+            <div class="mySlides fade">
+
+                <figure class="img__content img__content--slide">
+                    <img class="image_undertxt image_undertxt--slide" src="assets/images/rest2.png"
+                        srcset="assets/images/rest2@2x.png 2x" alt="photo représentant une de nos interview"
+                        loading="lazy" decoding="async">
+                </figure>
+            </div>
+
+            <div class="mySlides fade">
+
+                <figure class="img__content img__content--slide">
+                    <img class="image_undertxt image_undertxt--slide" src="assets/images/rest4.png"
+                        srcset="assets/images/rest4@2x.png 2x" alt="photo représentant une de nos interview"
+                        loading="lazy" decoding="async">
+                </figure>
+            </div>
+        </div>
+        <div class="element_dot">
+            <span class="dot"></span>
+            <span class="dot"></span>
+            <span class="dot"></span>
+            <span class="dot"></span>
+            <span class="dot"></span>
+        </div>
+    
+    </section>
+    <section class="grid section__color">
+        <h2 class="title mgrid-start01 mgrid-end04" id="partie7">User Journey</h2>
+        <h3 class="title mgrid-start01 mgrid-end04"></h3>
+        <p class="mgrid-start01 mgrid-end04">Les User journey, est utilisés pour les recherches et améliorations selon
+            un ou des
+            problème(s) trouvé(s), cela permet d’améliorer nos projets et de trouver une solution plus optimale pour le
+            projet.</p>
+        <ul>
+            <li class="slide"> <img class="image_slide" src="assets/images/user1.png" alt="User journey réalisé"
+                    srcset="assets/images/user1@2x.png 2x" loading="lazy" decoding="async">
+            </li>
+            <li class="slide"> <img class="image_slide" src="assets/images/user2.png" alt="User journey réalisé"
+                    srcset="assets/images/user2@2x.png 2x" loading="lazy" decoding="async"></li>
+            <li class="slide"> <img class="image_slide" src="assets/images/user3.png" alt="User journey réalisé"
+                    srcset="assets/images/user3@2x.png 2x" loading="lazy" decoding="async"></li>
+        </ul>
+    </section>
+    <section class="grid">
+        <h2 class="title mgrid-start01 mgrid-end04" id="partie7">Intégration</h2>
+        <figure class="img__content">
+            <img class="image_undertxt" src="assets/images/plancroquis.png" srcset="assets/images/plancroquis@2x.png 2x"
+                alt="photo représentant une de nos interview" loading="lazy" decoding="async">
+        </figure>
     </section>
     <aside class="grid reseaux">
         <h2>Retrouvez-moi sur :</h2>
@@ -265,7 +506,6 @@
         </ul>
 
     </aside>
-    </main>
     <footer>
         <div>
             <nav>