add contenu, images, burger menu

assets/css/style.css

@@ -1,75 +1,220 @@
 @import 'normalize.css';
 
 @font-face {
-    font-family: 'MoodboardFont';
+  font-family: 'MoodboardFont';
-    font-weight: 400;
+  font-weight: 400;
-    src: url('../fonts/moodboardfont-webfont.woff2') format('woff2'),
+  src: url('../fonts/moodboardfont-webfont.woff2') format('woff2'),
-        url('../fonts/moodboardfont-webfont.woff') format('woff');
+    url('../fonts/moodboardfont-webfont.woff') format('woff');
 }
 
 @font-face {
-    font-family: 'Queensides';
+  font-family: 'Queensides';
-    font-weight: 400;
+  font-weight: 400;
-    src: url('../fonts/Queensides-3z7Ey.ttf');
+  src: url('../fonts/Queensides-3z7Ey.ttf');
 }
 
 @font-face {
-    font-family: 'QueensidesL';
+  font-family: 'QueensidesL';
-    font-weight: 300;
+  font-weight: 300;
-    src: url('../fonts/QueensidesLight-ZVj3l.ttf');
+  src: url('../fonts/QueensidesLight-ZVj3l.ttf');
 }
 
 @font-face {
-    font-family: 'QueensidesM';
+  font-family: 'QueensidesM';
-    font-weight: 700;
+  font-weight: 700;
-    src: url('../fonts/QueensidesMedium-x30zV.ttf');
+  src: url('../fonts/QueensidesMedium-x30zV.ttf');
 }
 
 :root {
-    --color-bg: #77A3D2;
+  --color-bg: #77A3D2;
+}
+html {
+  scroll-behavior: smooth;
+}
+body {
+  line-height: 1.5;
+}
+@media(prefers-color-scheme: dark) {
+  :root {
+    --color-bg: #573138;
+  }
+
+  [data-theme="light"] {
+    --color-bg: #94beeb;
+    --color-txt: #001f1f;
+  }
+
+  [data-theme="dark"] {
+    --color-bg: #4a3157;
+    --color-txt: #001f1f;
+  }
 }
 
-@media(prefers-color-scheme: dark) {
+[data-theme="dark"] .btn__dark {
-    :root {
+  display: none;
-        --color-bg: #ffd8e0;
+}
-    }
 
-    [data-theme="light"] {
+[data-theme="dark"] .btn__light {
-        --color-bg: #94beeb;
+  display: inline;
-        --color-txt: #001f1f;
+}
-    }
 
-    [data-theme="dark"] {
+.logoDWT__dark-mode {
-        --color-bg: #ffd8e0;
+  display: none;
-        --color-txt: #001f1f;
+}
-    }
+
+.logo__dark-mode {
+  display: none;
+}
+
+
+/*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;
+}
+
+.grid>* {
+  grid-column: 1/-1;
+}
+
+.grid>figure {
+  margin: 0;
+}
+.grid__discu{
+  display: grid;
+  grid-template-columns: 3fr 4fr 4fr 3fr;
+  grid-template-rows: 125px repeat(1, 1fr);
+  padding-left: 30px;
+  padding-right: 30px;
+  gap: 3em 20px;
+  margin-top: 2em;
+}
+
+.img__content {
+  padding-bottom: 3em;
+}
+
+.mgrid-start01 {
+  grid-column-start: 1;
+}
+
+.mgrid-start02 {
+  grid-column-start: 2;
+}
+
+.mgrid-start03 {
+  grid-column-start: 3;
+}
+
+.mgrid-start04 {
+  grid-column-start: 4;
+}
+
+.mgrid-end02 {
+  grid-column-end: 2;
+}
+
+.mgrid-end03 {
+  grid-column-end: 3;
+}
+
+.mgrid-end04 {
+  grid-column-end: 4;
 }
 
 body {
-    font-family: 'QueensidesL';
+  font-family: 'QueensidesM';
-    font-size: 18px;
+  font-size: 18px;
-    color: var(--color-txt);
+  color: var(--color-txt);
-    background-color: var(--color-bg);
+  padding: 0;
-    padding: 0;
+  margin: 0;
-    margin: 0;
 }
 
+.grid__title {
+  display: grid;
+  grid-template-columns: 1fr;
+  padding-left: 30px;
+  padding-right: 30px;
+  gap: 3em 20px;
+}
+.grid--content{
+  gap: 9em 20px;
+}
 .title {
   font-size: 32px;
   margin-top: 2rem;
   text-align: center;
+  font-family: 'moodboardFont';
+  font-weight: 400;
 }
 
 
 p {
-    font-size: 23px;
+  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: 100vh;
+  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,
-.link--section,
 .list {
   text-decoration: none;
   list-style: none;
@@ -77,122 +222,230 @@ img {
   gap: 50px;
   padding: 0;
 }
+
 header {
-    display: flex;
+  display: flex;
-    justify-content: space-between;
+  justify-content: space-around;
-    align-items: center;
+  align-items: center;
-    gap: 10px;
+  background-color: #77A3D2;
-  }
+  padding-top: 1rem;
-  .fond {
+  padding-bottom: 1rem;
-    background-repeat: no-repeat;
-    background-size: cover;
-    padding-bottom: 100%;
-    padding-top: 18vh;
-    background-image: url(../images/background.png);
-  }
-  .headtitle{
-     max-width: 100%;
-  }
-  .header__linklogo {
-    position: relative;
-    width: 69px;
-    height: 50%;
-    margin-left: 1em;
-  }
-  
-  .header--second {
-    display: flex;
-    align-items: center;
-    margin-right: 2em;
-    flex-direction: row-reverse;
-    gap: 2em;
-  }
-  
-  .header__navigation {
-    display: none;
-  }
-  
-  .header__navigation--m {
-    display: none;
-  }
-  
-  /*Burger Menu button*/
-  .header__menu--burger {
-    width: 60px;
-    height: 60px;
-    border: none;
-    position: relative;
-    overflow: hidden;
-    background-size: cover;
-    background-color: transparent;
-    z-index: 1;
-    overflow: hidden;
-    position: relative;
-  }
-  
-  .header--no-display {
-    display: none;
-  }
-  
-  
-  .header--display {
-    transform: translateX(100%);
-    transition: transform 0.2s ease-in;
-    margin-bottom: -200px;
-  }
-  
-  
-  /*Header*/
-  .header__btn--theme {
-    background-color: var(--color-primary);
-    color: var(--color-bg);
-    width: 35px;
-    height: 35px;
-    background-image: url(../images/energy.svg);
-    background-color: transparent;
-    background-repeat: no-repeat;
-    border: none;
-    overflow: hidden;
-    position: relative;
-    cursor: pointer;
-    z-index: 2;
-  }
-  
-  
-  .header__button--txt {
-    /*le laisser en-dessous de dark-mode*/
-    position: absolute;
-    white-space: nowrap;
-    text-indent: 100%;
-  }
-  
-  .list--header,
-  .list {
-    text-decoration: none;
-    list-style: none;
-    display: flex;
-    gap: 35px;
-    padding: 0;
-    font-size: 28px;
-  }
-  
-  .header__span--none {
-    display: none;
-  }
-  
-  .header__navigation {
-    display: none;
-  }
-  
-.home--heading .section--content .logo{
-    display: block;
-    width: 100%;
-    height: auto;
 }
-@media only screen and (min-width: 750px) {
+
+.fond {
+  background-repeat: no-repeat;
+  background-size: cover;
+  padding-bottom: 100%;
+  padding-top: 18vh;
+  background-image: url(../images/background.png);
+  background-color: var(--color-bg);
+  filter: contrast(130%);
+}
+
+.headtitle {
+  max-width: 100%;
+}
+
+.header__linklogo {
+  position: relative;
+  width: 69px;
+  height: 50%;
+  display: block;
 
 }
 
+.header--second {
+  display: flex;
+  align-items: center;
+  flex-direction: row-reverse;
+}
+
+.header__navigation {
+  display: none;
+}
+
+.header__navigation--m {
+  display: none;
+}
+
+/*Burger Menu button*/
+.header__menu--burger {
+  width: 60px;
+  height: 60px;
+  border: none;
+  position: relative;
+  overflow: hidden;
+  background-size: cover;
+  background-color: transparent;
+  z-index: 1;
+  overflow: hidden;
+  position: relative;
+}
+
+.header--no-display {
+  display: none;
+}
+
+
+.header--display {
+  transform: translateX(100%);
+  transition: transform 0.2s ease-in;
+  margin-bottom: -200px;
+}
+
+
+/*Header*/
+.header__btn--theme {
+  color: var(--color-bg);
+  width: 35px;
+  height: 35px;
+  background-color: transparent;
+  background-repeat: no-repeat;
+  border: none;
+  overflow: hidden;
+  position: relative;
+  cursor: pointer;
+  z-index: 2;
+}
+
+
+.header__button--txt {
+  /*le laisser en-dessous de dark-mode*/
+  position: absolute;
+  white-space: nowrap;
+  text-indent: 100%;
+}
+
+.list--header,
+.list {
+  text-decoration: none;
+  list-style: none;
+  display: flex;
+  gap: 35px;
+  padding: 0;
+  font-size: 28px;
+}
+
+.header__span--none {
+  display: none;
+}
+
+.header__navigation {
+  display: none;
+}
+
+.home--heading .section--content .logo {
+  display: block;
+  width: 100%;
+  height: auto;
+}
+.discu__el{
+  text-decoration: none;
+  border-radius: 25px;
+  display: inline-flex;
+  align-items: center;
+  margin-top: 1em;
+}
+.discu__el--pink{
+  background-color: #ff00c84b;
+  padding: 2rem;
+  margin-right: 1em;
+}
+.discu__el--blue{
+  background-color: #5eff004d;
+  padding: 2rem;
+  margin-left: 1em;
+}
+.discu__el--green{
+  background-color: #00b3ff4b;
+  padding: 2rem;
+  margin-right: 1em;
+}
+.content__objet{
+  background-color: #ffdcf7;
+  margin-left: -2em;
+  margin-right: -4em;
+  padding: 3em;
+  line-height: 1.45;
+}
+.reseaux__el {
+  text-decoration: none;
+  border-radius: 25px;
+  display: inline-flex;
+  align-items: center;
+}
+
+.reseaux {
+  list-style: none;
+  margin-top: 5rem;
+}
+
+.reseaux__el a {
+  width: 35px;
+  height: 45px;
+  display: inline-block-;
+  background-color: border;
+}
+
+.reseaux__txt {
+  position: absolute;
+  visibility: hidden;
+  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;
+}
+
+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;
+}
+
+body[data-menu] .mlink--header,
+.link--header {
+  font-size: 28px;
+  color: var(--color-link);
+}
+
+body[data-menu] .mlink--active,
+.link--active {
+  border-bottom: solid 3px #84C4CE;
+  color: var(--color-linky-active);
+}
+
+.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;
+}
+
+@media only screen and (min-width: 750px) {}
+
 @media only screen and (min-width: 1024px) {
   header {
     display: flex;
@@ -203,19 +456,22 @@ header {
     height: 10%;
     top: 0em;
   }
+
   .header__navigation {
     margin-left: 30px;
     display: flex;
     z-index: 3;
   }
-  .hero{
+
+  .hero {
     background-color: coral;
     background-image: url(/assets/images/backgroundv3.png);
     padding-top: 200px;
     padding-bottom: 200px;
 
   }
+
   .fond {
-   
+    padding-top: 0vh;
-  }
   }
+}

assets/images/dwt.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 375 130.65"><defs><style>.cls-1{fill:#fafafa;}.cls-2{fill:#ffdc00;}</style></defs><g id="Calque_2" data-name="Calque 2"><g id="Calque_1-2" data-name="Calque 1"><path class="cls-1" d="M0,0H29A67.63,67.63,0,0,1,50.06,3.11a41.61,41.61,0,0,1,16.19,9.57A43.25,43.25,0,0,1,76.64,29.12q3.67,10,3.68,23.72T76.64,76.72A45.1,45.1,0,0,1,66.33,93.49a42,42,0,0,1-15.78,9.89,59.77,59.77,0,0,1-20.29,3.28H0ZM27.65,87.19A34.22,34.22,0,0,0,39,85.39a21.35,21.35,0,0,0,8.84-5.81A27.45,27.45,0,0,0,53.57,69a54.72,54.72,0,0,0,2-16.19,53.25,53.25,0,0,0-2-16,26,26,0,0,0-5.72-10.31A20.75,20.75,0,0,0,39,21.1a37.39,37.39,0,0,0-11.36-1.63H24.21V87.19Z"/><path class="cls-1" d="M88.17,0h24.54l3.43,56.76q.17,6.87.33,13.58t.33,13.58h.49q1.3-6.87,2.86-13.58T123,56.76l7.36-29.61h14.56l7,29.61q1.31,6.56,2.78,13.42t2.78,13.74h.65q.33-6.87.41-13.66c0-4.53.19-9,.41-13.5L162.11,0H185L171.76,106.66H146.57l-6.71-33.54q-1-5.07-1.8-10.39t-1.14-10.06h-.49q-.5,4.76-1.23,10.06t-1.72,10.39l-6.38,33.54H102.4Z"/><path class="cls-1" d="M222.63,20.28h-31.9V0h88V20.28h-31.9v86.38H222.63Z"/><rect class="cls-2" x="302.3" y="106.66" width="72.7" height="23.99"/></g></g></svg>

assets/images/favicon.svg

@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 971.26 296.35">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #fff;
+      }
+
+      .cls-2 {
+        fill: #ff00c7;
+      }
+    </style>
+  </defs>
+  <rect x="4.09" y="2.18" width="967.17" height="294.17"/>
+  <rect class="cls-2" x="-21.32" y="101.61" width="1132.59" height="110.1" transform="translate(91.61 -183.93) rotate(20.88)"/>
+  <g>
+    <path class="cls-1" d="m321.06,224.2c10.71,0,12.1,7.45,12.1,11.64,0,28.86-57.25,58.65-86.58,58.65-64.23,0-102.86-103.8-127.53-103.8-7.91,0-6.52,11.17-6.52,27.93-.46,14.43.93,17.22,10.24,25.6,5.59,5.12,7.91,8.84,7.91,13.03,0,19.08-37.7,39.1-67.96,39.1s-56.79-20.48-56.79-35.38c0-4.65,2.79-8.38,13.03-13.96,11.17-6.52,12.57-13.97,13.5-97.28.93-60.51,1.86-78.2-2.79-82.85-7.91-7.91-25.6-9.31-25.6-23.74C4.09,9.16,98.58,4.97,128.83,4.97c74.01,0,129.86,29.79,129.86,69.35.46,42.36-59.58,84.25-59.58,91.7,0,11.17,58.65,64.7,93.09,64.7,12.1,0,19.08-6.52,28.86-6.52ZM173.98,95.74c0-22.81-24.21-50.74-43.29-50.74-13.96,0-18.62,15.36-18.62,59.11v35.84c0,13.03,6.05,15.83,8.84,15.83,20.95,0,53.06-35.84,53.06-60.04Z"/>
+    <path class="cls-1" d="m499.31,249.8c0-12.1-.47-18.62-3.26-18.62-2.33,0-5.12,3.26-9.31,10.71-20.01,35.38-47.94,54.46-78.66,54.46-41.89,0-65.16-47.94-65.16-105.19-.47-71.21,34.91-188.97,106.59-188.97,12.1,0,16.76,3.26,16.76,8.38,0,4.19-2.33,8.38-4.65,11.17-12.57,12.57-32.12,90.3-32.58,134.05,0,12.1-4.19,70.75,22.34,70.75,29.79.47,48.87-92.16,51.2-131.26,2.33-35.38-10.24-30.25-10.24-50.27,0-31.18,55.39-38.63,79.13-38.63s37.24,7.91,37.24,21.41c0,12.1-21.88,21.41-29.32,34.44-5.12,9.31-6.05,52.6-6.05,111.71v36.77c0,19.08,6.98,28.86,21.41,28.86,12.1,0,18.15-8.84,29.79-8.84,7.91,0,12.57,3.72,12.57,13.03,0,6.52-1.86,9.31-25.6,27-22.81,17.22-45.15,25.6-67.03,25.6-29.79,0-45.15-15.36-45.15-46.54Z"/>
+    <path class="cls-1" d="m646.84,264.7c0-9.77,7.45-15.83,18.15-19.55,7.91-2.79,19.08-6.05,27-11.17,26.06-18.62,67.03-53.99,67.03-67.03,0-7.45-51.2-85.18-60.04-92.63-13.03-10.7-33.98-5.58-33.98-18.62,0-17.22,72.15-53.53,105.66-53.53,8.38,0,13.03,2.33,13.03,7.91,0,3.72-.47,9.31-1.4,17.22-1.86,16.76,7.91,37.24,28.86,65.63,10.24,14.43,13.96,16.76,18.62,16.76,13.5,0,47.94-32.12,47.94-42.36,0-3.72-5.12-6.52-11.17-10.24-9.77-5.58-14.89-9.77-14.89-16.29,0-16.29,47.48-37.24,84.71-37.24,20.95,0,34.91,6.52,34.91,15.83,0,6.52-6.52,13.5-21.41,28.39l-90.76,92.16c-8.38,8.38,3.26,29.32,8.38,35.84l30.25,39.1c14.43,18.62,16.29,25.13,37.24,25.13,13.5-.47,19.55,2.79,19.55,9.77,0,21.41-39.1,46.54-73.08,46.54-10.24,0-26.06-6.98-38.63-23.27l-42.82-54.92c-6.98-9.31-10.24-12.1-14.89-12.1-14.89,0-38.63,27.93-38.63,46.55,0,5.58,2.33,8.84,2.33,13.5,0,15.36-27,30.25-54.46,30.25s-47.48-15.36-47.48-31.65Z"/>
+  </g>
+</svg>

assets/images/github.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>

assets/images/headlogo.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="978.000000pt" height="343.000000pt" viewBox="0 0 978.000000 343.000000"
+ preserveAspectRatio="xMidYMid meet">
+
+<g transform="translate(0.000000,343.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+</g>
+</svg>

assets/images/insta.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/></svg>

assets/images/linkedin.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10-10-4.486-10-10 4.486-10 10-10zm0-2c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-2 8c0 .557-.447 1.008-1 1.008s-1-.45-1-1.008c0-.557.447-1.008 1-1.008s1 .452 1 1.008zm0 2h-2v6h2v-6zm3 0h-2v6h2v-2.861c0-1.722 2.002-1.881 2.002 0v2.861h1.998v-3.359c0-3.284-3.128-3.164-4-1.548v-1.093z"/></svg>

assets/images/pinterest.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.372-12 12 0 5.084 3.163 9.426 7.627 11.174-.105-.949-.2-2.405.042-3.441.218-.937 1.407-5.965 1.407-5.965s-.359-.719-.359-1.782c0-1.668.967-2.914 2.171-2.914 1.023 0 1.518.769 1.518 1.69 0 1.029-.655 2.568-.994 3.995-.283 1.194.599 2.169 1.777 2.169 2.133 0 3.772-2.249 3.772-5.495 0-2.873-2.064-4.882-5.012-4.882-3.414 0-5.418 2.561-5.418 5.207 0 1.031.397 2.138.893 2.738.098.119.112.224.083.345l-.333 1.36c-.053.22-.174.267-.402.161-1.499-.698-2.436-2.889-2.436-4.649 0-3.785 2.75-7.262 7.929-7.262 4.163 0 7.398 2.967 7.398 6.931 0 4.136-2.607 7.464-6.227 7.464-1.216 0-2.359-.631-2.75-1.378l-.748 2.853c-.271 1.043-1.002 2.35-1.492 3.146 1.124.347 2.317.535 3.554.535 6.627 0 12-5.373 12-12 0-6.628-5.373-12-12-12z" fill-rule="evenodd" clip-rule="evenodd"/></svg>

assets/images/twitter.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10-10-4.486-10-10 4.486-10 10-10zm0-2c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm6.5 8.778c-.441.196-.916.328-1.414.388.509-.305.898-.787 1.083-1.362-.476.282-1.003.487-1.564.597-.448-.479-1.089-.778-1.796-.778-1.59 0-2.758 1.483-2.399 3.023-2.045-.103-3.86-1.083-5.074-2.572-.645 1.106-.334 2.554.762 3.287-.403-.013-.782-.124-1.114-.308-.027 1.14.791 2.207 1.975 2.445-.346.094-.726.116-1.112.042.313.978 1.224 1.689 2.3 1.709-1.037.812-2.34 1.175-3.647 1.021 1.09.699 2.383 1.106 3.773 1.106 4.572 0 7.154-3.861 6.998-7.324.482-.346.899-.78 1.229-1.274z"/></svg>

assets/js/app.js

@@ -43,3 +43,10 @@ function toggleNavigation() {
  document.body.removeAttribute("data-menu");
  }
 }
+
+
+// date copyright
+let answerDate = document.querySelector(".date");
+let today = new Date();
+let year = today.getFullYear();
+answerDate.innerHTML = year;

index.html

@@ -21,7 +21,7 @@
     <meta property="og:image" content="assets/images/logo_dark.svg">
     <meta property="og:image:width" content="1800">
     <meta property="og:image:height" content="945">
-    <link rel="icon" type="image/x-icon" href="./assets/images/favicon.svg">
+    <link rel="icon" type="image/x-icon" href="./assets/images/logodark.svg">
     <title>RUX Pina Vetrano — DWT — Heaj</title>
     <!-- CSS and Javascript -->
     <link rel="stylesheet" href="assets/css/normalize.css">
@@ -30,17 +30,19 @@
 </head>
 
 <body data-theme="light">
-    <button class="js-theme-trigger">Theme</button>
     <!-- <img class="full-width mgrid-start02 tgrid-start01 tgrid-end03 dgrid-start dgrid-end06" src="assets/images/akitadog.jpg"
     alt="akita dog sur le site">-->
     <header>
 
-
+        <button class="js-theme-trigger">
+            <svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd">
+                <path
+                    d="M13 9h9l-14 15 3-9h-9l14-15-3 9zm-8.699 5h8.086l-1.987 5.963 9.299-9.963h-8.086l1.987-5.963-9.299 9.963z" />
+            </svg></button>
         <div class="header__linklogo">
 
             <a href="index.html">
-                <?xml version="1.0" encoding="UTF-8"?>
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 233.75 71.07">
-                <svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 233.75 71.07">
                     <defs>
                         <style>
                             .cls-1 {
@@ -80,16 +82,6 @@
             </button>
             <div class="btn__lightdark--blockd">
 
-                <button class="btn btn__lightdark">
-
-                    <span class="text__darklight"></span>
-
-                    <svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd"
-                        clip-rule="evenodd">
-                        <path
-                            d="M13 9h9l-14 15 3-9h-9l14-15-3 9zm-8.699 5h8.086l-1.987 5.963 9.299-9.963h-8.086l1.987-5.963-9.299 9.963z" />
-                    </svg>
-                </button>
             </div>
             <div class="header__navigation">
 
@@ -97,11 +89,11 @@
 
                     <ul class="list--header">
                         <li>
-                            <a class="link link--header link--active" href="index.html">accueil</a>
+                            <a class="link link--header link--active" href="#partie0">Partie //01</a>
                         </li>
 
                         <li>
-                            <a class="link link--header" href="experience.html">expérience</a>
+                            <a class="link link--header" href="#partie1">Partie //02</a>
                         </li>
 
                     </ul>
@@ -117,16 +109,13 @@
     <div class="header__navigation--m">
         <ul class="list__m--header">
             <li>
-                <a class="link mlink--header mlink--active" href="index.html">accueil</a>
+                <a class="link mlink--header mlink--active" href="#partie0">Partie //01</a>
             </li>
 
             <li>
-                <a class="link mlink--header" href="experience.html">expérience</a>
+                <a class="link mlink--header" href="#partie1">Partie //02</a>
             </li>
         </ul>
-        <div class="btn__lightdark--block">
-        </div>
-
     </div>
     <section class="headback">
         <div class="fond">
@@ -135,10 +124,165 @@
         <!--<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>-->
-        <h1 class="title">Rethinking User Experience</h1>
     </section>
-    <section class="#partie1">L’atelier RUXRéaliser une interface adaptée et compréhensible pour l’utilisateur, pour une
+    <section class="grid">
-        navigation facile et rapide”</section><a href="#partie1" class="nav__link link--visited link--color">Que le spectacle commence ! 👏 </a>
+        <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
+            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 à
+            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">
+            <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">
+            <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">
+    <h2 class="title mgrid-start01 mgrid-end04" id="partie1">Création de l'Équipe</h2>
+    <div class="mgrid-start01 mgrid-end04">
+        <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>
+            <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 à
+            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>
+    </section>
+    <aside class="grid reseaux">
+        <h2>Retrouvez-moi sur :</h2>
+        <ul class="reseaux__liste">
+            <li class="reseaux__el">
+                <a href="https://www.behance.net/pinavetran661a">
+                    <span class="reseaux__txt">Behance</span>
+                    <svg class="contact__icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
+                        viewBox="0 0 24 24">
+                        <path
+                            d="M8.84 10.835h-1.965v-1.859h1.783c1.878 0 1.646 1.859.182 1.859zm5.789 1.058h2.624c-.115-1.687-2.36-1.81-2.624 0zm-5.9.396h-1.854v1.947h1.824c1.782-.001 1.673-1.947.03-1.947zm15.271-.289c0 6.627-5.373 12-12 12s-12-5.373-12-12 5.373-12 12-12 12 5.373 12 12zm-13.357-.733c1.668-.853 1.607-3.981-1.587-4.028h-4.056v8.73h3.771c3.958 0 3.891-3.967 1.872-4.702zm3.357-3.166h4v-.875h-4v.875zm4.943 3.693c-.545-3.505-6.053-3.711-6.053.872 0 4.526 5.18 3.818 5.949 1.56h-1.848c-.645.748-2.508.531-2.404-1.184h4.41c.009-.555-.009-.953-.054-1.248z" />
+                    </svg></a>
+            </li>
+            <li class="reseaux__el">
+                <a href="https://dribbble.com/Lilflamby">
+                    <span class="reseaux__txt">dribbble</span>
+                    <svg class="contact__icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
+                        viewBox="0 0 24 24">
+                        <path
+                            d="M11.455 9.985c-1.419.417-3.11.632-5.067.646.405-1.654 1.518-3.03 3.003-3.784.777 1.016 1.464 2.063 2.064 3.138zm.965 1.93c-.124-.28-.254-.559-.391-.835-1.622.51-3.561.769-5.804.772l-.008.148c0 1.404.504 2.692 1.34 3.695 1.266-1.901 2.891-3.164 4.863-3.78zm-3.97 4.641c1.569 1.225 3.671 1.589 5.624.836-.252-1.488-.65-2.94-1.19-4.352-1.819.542-3.285 1.714-4.434 3.516zm7.075-9.13c-.977-.754-2.197-1.209-3.525-1.209-.49 0-.964.068-1.418.184.764 1.028 1.441 2.086 2.035 3.172 1.236-.524 2.204-1.24 2.908-2.147zm8.475 4.574c0 6.627-5.373 12-12 12s-12-5.373-12-12 5.373-12 12-12 12 5.373 12 12zm-5 0c0-3.866-3.135-7-7-7s-7 3.134-7 7 3.135 7 7 7 7-3.134 7-7zm-5.824-1.349c.157.324.305.651.447.98 1.26-.217 2.641-.204 4.143.042-.073-1.292-.566-2.474-1.354-3.403-.807 1.005-1.89 1.798-3.236 2.381zm.914 2.132c.489 1.309.865 2.651 1.119 4.023 1.312-.88 2.241-2.284 2.497-3.909-1.317-.228-2.522-.268-3.616-.114z" />
+                    </svg>
+                </a>
+            </li>
+            <li class="reseaux__el">
+                <a href="https://medium.com/@pinavetranopro">
+                    <span class="reseaux__txt">medium</span>
+                    <svg class="contact__icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
+                        viewBox="0 0 24 24" fill-rule="evenodd" clip-rule="evenodd">
+                        <path
+                            d="M12 0c-6.626 0-12 5.372-12 12 0 6.627 5.374 12 12 12 6.627 0 12-5.373 12-12 0-6.628-5.373-12-12-12zm6.974 17.557v-.235l-1.092-1.072c-.096-.073-.144-.194-.124-.313v-7.874c-.02-.119.028-.24.124-.313l1.118-1.072v-.235h-3.869l-2.758 6.88-3.138-6.88h-4.059v.235l1.308 1.575c.128.115.194.285.176.457v6.188c.038.223-.032.451-.189.614l-1.471 1.784v.235h4.17v-.235l-1.471-1.784c-.158-.163-.233-.389-.202-.614v-5.352l3.66 7.985h.425l3.143-7.985v6.365c0 .17 0 .202-.111.313l-1.13 1.098v.235h5.49z" />
+                    </svg></a>
+            </li>
+
+            <li class="reseaux__el">
+                <a href="https://www.instagram.com/pina.p_f/">
+                    <span class="reseaux__txt">Instagram</span>
+                    <svg class="contact__icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
+                        viewBox="0 0 24 24">
+                        <path
+                            d="M14.829 6.302c-.738-.034-.96-.04-2.829-.04s-2.09.007-2.828.04c-1.899.087-2.783.986-2.87 2.87-.033.738-.041.959-.041 2.828s.008 2.09.041 2.829c.087 1.879.967 2.783 2.87 2.87.737.033.959.041 2.828.041 1.87 0 2.091-.007 2.829-.041 1.899-.086 2.782-.988 2.87-2.87.033-.738.04-.96.04-2.829s-.007-2.09-.04-2.828c-.088-1.883-.973-2.783-2.87-2.87zm-2.829 9.293c-1.985 0-3.595-1.609-3.595-3.595 0-1.985 1.61-3.594 3.595-3.594s3.595 1.609 3.595 3.594c0 1.985-1.61 3.595-3.595 3.595zm3.737-6.491c-.464 0-.84-.376-.84-.84 0-.464.376-.84.84-.84.464 0 .84.376.84.84 0 .463-.376.84-.84.84zm-1.404 2.896c0 1.289-1.045 2.333-2.333 2.333s-2.333-1.044-2.333-2.333c0-1.289 1.045-2.333 2.333-2.333s2.333 1.044 2.333 2.333zm-2.333-12c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm6.958 14.886c-.115 2.545-1.532 3.955-4.071 4.072-.747.034-.986.042-2.887.042s-2.139-.008-2.886-.042c-2.544-.117-3.955-1.529-4.072-4.072-.034-.746-.042-.985-.042-2.886 0-1.901.008-2.139.042-2.886.117-2.544 1.529-3.955 4.072-4.071.747-.035.985-.043 2.886-.043s2.14.008 2.887.043c2.545.117 3.957 1.532 4.071 4.071.034.747.042.985.042 2.886 0 1.901-.008 2.14-.042 2.886z" />
+                    </svg>
+                </a>
+
+            </li>
+            <li class="reseaux__el">
+                <a href="https://www.linkedin.com/in/pina-vetrano-55b4a1235/">
+                    <span class="reseaux__txt">Linkdin</span>
+                    <svg class="contact__icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
+                        viewBox="0 0 24 24">
+                        <path
+                            d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-2 16h-2v-6h2v6zm-1-6.891c-.607 0-1.1-.496-1.1-1.109 0-.612.492-1.109 1.1-1.109s1.1.497 1.1 1.109c0 .613-.493 1.109-1.1 1.109zm8 6.891h-1.998v-2.861c0-1.881-2.002-1.722-2.002 0v2.861h-2v-6h2v1.093c.872-1.616 4-1.736 4 1.548v3.359z" />
+                    </svg>
+                </a>
+            </li>
+            <li class="reseaux__el">
+                <a href="https://twitter.com/PetitFlamb">
+                    <span class="reseaux__txt">Twitter</span>
+                    <svg class="contact__icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
+                        viewBox="0 0 24 24">
+                        <path
+                            d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm6.066 9.645c.183 4.04-2.83 8.544-8.164 8.544-1.622 0-3.131-.476-4.402-1.291 1.524.18 3.045-.244 4.252-1.189-1.256-.023-2.317-.854-2.684-1.995.451.086.895.061 1.298-.049-1.381-.278-2.335-1.522-2.304-2.853.388.215.83.344 1.301.359-1.279-.855-1.641-2.544-.889-3.835 1.416 1.738 3.533 2.881 5.92 3.001-.419-1.796.944-3.527 2.799-3.527.825 0 1.572.349 2.096.907.654-.128 1.27-.368 1.824-.697-.215.671-.67 1.233-1.263 1.589.581-.07 1.135-.224 1.649-.453-.384.578-.87 1.084-1.433 1.489z" />
+                    </svg>
+
+                </a>
+            </li>
+            <li class="reseaux__el">
+                <a href="mailto:pinavetranopro@gmail.com">
+                    <span class="reseaux__txt">Me Contacter</span>
+                    <svg class="contact__icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
+                        viewBox="0 0 24 24">
+                        <path
+                            d="M12 .02c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm6.99 6.98l-6.99 5.666-6.991-5.666h13.981zm.01 10h-14v-8.505l7 5.673 7-5.672v8.504z" />
+                    </svg>
+                </a>
+            </li>
+            <li class="reseaux__el">
+                <a href="https://github.com/Pina-Vetrano">
+                    <span class="reseaux__txt">Github</span>
+                    <svg class="contact__icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
+                        viewBox="0 0 24 24">
+                        <path
+                            d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
+                    </svg>
+                </a>
+            </li>
+        </ul>
+
+    </aside>
+    </main>
+    <footer>
+        <div>
+            <nav>
+                <ul class="list--footer">
+                    <li class="link link--footer"><a href="http://dwm.re/"><img class="DWT" src="assets/images/dwt.svg"
+                                alt="Logo de l'option DWT de la HEAJ."></a></li>
+                    <li class="link link--footer"><a href="ui-kit.html" title="UI-KiT">UI-Kit</a>
+                    </li>
+                    <li class="link link--footer"><a href="credits.html" title="Crédits">Crédits</a></li>
+                    <li class="link link--footer"><a href="case-study.html" title="case-study">Case-study</a></li>
+                </ul>
+                <small class="footer__date link link--footer"><a class="copy" href="https://pinavetrano.be/">Pina
+                        Vetrano</a> © <span class="date"></span></small>
+            </nav>
+
+        </div>
+    </footer>
 </body>
 
 </html>