add normalize css, background mobile title firstp

assets/css/normalize.css

@@ -0,0 +1,349 @@
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+
+/* Document
+   ========================================================================== */
+
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+
+html {
+  line-height: 1.15; /* 1 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/* Sections
+   ========================================================================== */
+
+/**
+ * Remove the margin in all browsers.
+ */
+
+body {
+  margin: 0;
+}
+
+/**
+ * Render the `main` element consistently in IE.
+ */
+
+main {
+  display: block;
+}
+
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+/* Grouping content
+   ========================================================================== */
+
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+
+hr {
+  box-sizing: content-box; /* 1 */
+  height: 0; /* 1 */
+  overflow: visible; /* 2 */
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+pre {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/* Text-level semantics
+   ========================================================================== */
+
+/**
+ * Remove the gray background on active links in IE 10.
+ */
+
+a {
+  background-color: transparent;
+}
+
+/**
+ * 1. Remove the bottom border in Chrome 57-
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+
+abbr[title] {
+  border-bottom: none; /* 1 */
+  text-decoration: underline; /* 2 */
+  text-decoration: underline dotted; /* 2 */
+}
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+code,
+kbd,
+samp {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/**
+ * Add the correct font size in all browsers.
+ */
+
+small {
+  font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/* Embedded content
+   ========================================================================== */
+
+/**
+ * Remove the border on images inside links in IE 10.
+ */
+
+img {
+  border-style: none;
+}
+
+/* Forms
+   ========================================================================== */
+
+/**
+ * 1. Change the font styles in all browsers.
+ * 2. Remove the margin in Firefox and Safari.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit; /* 1 */
+  font-size: 100%; /* 1 */
+  line-height: 1.15; /* 1 */
+  margin: 0; /* 2 */
+}
+
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+
+button,
+input { /* 1 */
+  overflow: visible;
+}
+
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+
+button,
+select { /* 1 */
+  text-transform: none;
+}
+
+/**
+ * Correct the inability to style clickable types in iOS and Safari.
+ */
+
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button;
+}
+
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+/**
+ * Restore the focus styles unset by the previous rule.
+ */
+
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
+/**
+ * Correct the padding in Firefox.
+ */
+
+fieldset {
+  padding: 0.35em 0.75em 0.625em;
+}
+
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ *    `fieldset` elements in all browsers.
+ */
+
+legend {
+  box-sizing: border-box; /* 1 */
+  color: inherit; /* 2 */
+  display: table; /* 1 */
+  max-width: 100%; /* 1 */
+  padding: 0; /* 3 */
+  white-space: normal; /* 1 */
+}
+
+/**
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+progress {
+  vertical-align: baseline;
+}
+
+/**
+ * Remove the default vertical scrollbar in IE 10+.
+ */
+
+textarea {
+  overflow: auto;
+}
+
+/**
+ * 1. Add the correct box sizing in IE 10.
+ * 2. Remove the padding in IE 10.
+ */
+
+[type="checkbox"],
+[type="radio"] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+
+[type="search"] {
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
+}
+
+/**
+ * Remove the inner padding in Chrome and Safari on macOS.
+ */
+
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
+}
+
+/* Interactive
+   ========================================================================== */
+
+/*
+ * Add the correct display in Edge, IE 10+, and Firefox.
+ */
+
+details {
+  display: block;
+}
+
+/*
+ * Add the correct display in all browsers.
+ */
+
+summary {
+  display: list-item;
+}
+
+/* Misc
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 10+.
+ */
+
+template {
+  display: none;
+}
+
+/**
+ * Add the correct display in IE 10.
+ */
+
+[hidden] {
+  display: none;
+}

assets/css/style.css

@@ -3,57 +3,219 @@
 @font-face {
     font-family: 'MoodboardFont';
     font-weight: 400;
-    src: url('assets/fonts/moodboardfont-webfont.woff2') format('woff2'),
-         url('assets/fonts/moodboardfont-webfont.woff2') format('woff');
+    src: url('../fonts/moodboardfont-webfont.woff2') format('woff2'),
+        url('../fonts/moodboardfont-webfont.woff') format('woff');
 }
+
 @font-face {
     font-family: 'Queensides';
     font-weight: 400;
     src: url('../fonts/Queensides-3z7Ey.ttf');
 }
+
 @font-face {
     font-family: 'QueensidesL';
     font-weight: 300;
     src: url('../fonts/QueensidesLight-ZVj3l.ttf');
 }
+
 @font-face {
     font-family: 'QueensidesM';
     font-weight: 700;
     src: url('../fonts/QueensidesMedium-x30zV.ttf');
 }
+
 :root {
-    --color-bg: #ffb4b4;
+    --color-bg: #77A3D2;
 }
 
 @media(prefers-color-scheme: dark) {
     :root {
-        --color-bg: #2d2d47;
+        --color-bg: #ffd8e0;
     }
 
     [data-theme="light"] {
-        --color-bg: #ffb4b4;
+        --color-bg: #94beeb;
+        --color-txt: #001f1f;
     }
 
     [data-theme="dark"] {
-        --color-bg: #2d2d47;
-        --color-txt-dark: #fff;
+        --color-bg: #ffd8e0;
+        --color-txt: #001f1f;
     }
 }
 
 body {
     font-family: 'QueensidesL';
     font-size: 18px;
-    color: var(--color-txt-dark);
+    color: var(--color-txt);
     background-color: var(--color-bg);
     padding: 0;
     margin: 0;
 }
 
 .title {
-    font-family: 'MoodboardFont';
+  font-size: 32px;
+  margin-top: 2rem;
+  text-align: center;
 }
+
+
 p {
-    font-family: 'QueensidesM';
     font-size: 23px;
 }
-@media only screen and (min-width: 750px) {}
+img {
+    max-width: 100vh;
+}
+.list--header,
+.list--footer,
+.link--section,
+.list {
+  text-decoration: none;
+  list-style: none;
+  display: flex;
+  gap: 50px;
+  padding: 0;
+}
+header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 10px;
+  }
+  .fond {
+    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) {
+
+}
+
+@media only screen and (min-width: 1024px) {
+  header {
+    display: flex;
+    margin-top: auto;
+    position: fixed;
+    width: 100%;
+    z-index: 2;
+    height: 10%;
+    top: 0em;
+  }
+  .header__navigation {
+    margin-left: 30px;
+    display: flex;
+    z-index: 3;
+  }
+  .hero{
+    background-color: coral;
+    background-image: url(/assets/images/backgroundv3.png);
+    padding-top: 200px;
+    padding-bottom: 200px;
+
+  }
+  .fond {
+   
+  }
+  }

assets/images/logodark.svg

@@ -0,0 +1,13 @@
+<?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 233.75 71.07">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #fff;
+      }
+    </style>
+  </defs>
+  <path class="cls-1" d="m76.58,53.64c2.59,0,2.92,1.8,2.92,2.81,0,6.97-13.83,14.17-20.91,14.17-15.52,0-24.85-25.08-30.81-25.08-1.91,0-1.57,2.7-1.57,6.75-.11,3.49.22,4.16,2.47,6.18,1.35,1.24,1.91,2.14,1.91,3.15,0,4.61-9.11,9.44-16.42,9.44S.45,66.12.45,62.52c0-1.12.67-2.02,3.15-3.37,2.7-1.57,3.04-3.37,3.26-23.5.22-14.62.45-18.89-.67-20.02-1.91-1.91-6.18-2.25-6.18-5.74C0,1.69,22.83.68,30.13.68c17.88,0,31.37,7.2,31.37,16.76.11,10.23-14.39,20.35-14.39,22.15,0,2.7,14.17,15.63,22.49,15.63,2.92,0,4.61-1.57,6.97-1.57Zm-35.54-31.03c0-5.51-5.85-12.26-10.46-12.26-3.37,0-4.5,3.71-4.5,14.28v8.66c0,3.15,1.46,3.82,2.14,3.82,5.06,0,12.82-8.66,12.82-14.5Z"/>
+  <path class="cls-1" d="m119.69,59.83c0-2.93-.11-4.5-.79-4.5-.56,0-1.24.79-2.25,2.59-4.83,8.55-11.58,13.16-19,13.16-10.12,0-15.74-11.58-15.74-25.41-.11-17.2,8.43-45.66,25.75-45.66,2.93,0,4.05.79,4.05,2.03,0,1.01-.56,2.02-1.12,2.7-3.04,3.04-7.76,21.81-7.87,32.39,0,2.93-1.01,17.09,5.4,17.09,7.2.11,11.81-22.27,12.37-31.71.56-8.55-2.47-7.31-2.47-12.15,0-7.53,13.38-9.33,19.11-9.33s9,1.91,9,5.17c0,2.93-5.28,5.17-7.08,8.32-1.24,2.25-1.46,12.71-1.46,26.99v8.88c0,4.61,1.68,6.97,5.17,6.97,2.93,0,4.39-2.13,7.2-2.13,1.91,0,3.04.9,3.04,3.15,0,1.57-.45,2.25-6.18,6.52-5.51,4.16-10.91,6.18-16.19,6.18-7.2,0-10.91-3.71-10.91-11.24Z"/>
+  <path class="cls-1" d="m155.38,63.42c0-2.36,1.8-3.82,4.39-4.72,1.91-.67,4.61-1.46,6.52-2.7,6.29-4.5,16.19-13.05,16.19-16.19,0-1.8-12.37-20.58-14.51-22.38-3.15-2.59-8.21-1.35-8.21-4.5,0-4.16,17.43-12.93,25.53-12.93,2.02,0,3.15.56,3.15,1.91,0,.9-.11,2.25-.34,4.16-.45,4.05,1.91,9,6.97,15.85,2.47,3.49,3.37,4.05,4.5,4.05,3.26,0,11.58-7.76,11.58-10.23,0-.9-1.24-1.57-2.7-2.47-2.36-1.35-3.6-2.36-3.6-3.94,0-3.93,11.47-9,20.46-9,5.06,0,8.43,1.57,8.43,3.82,0,1.57-1.57,3.26-5.17,6.86l-21.92,22.26c-2.02,2.02.79,7.08,2.02,8.66l7.31,9.45c3.49,4.5,3.94,6.07,9,6.07,3.26-.11,4.72.67,4.72,2.36,0,5.17-9.44,11.24-17.65,11.24-2.48,0-6.3-1.68-9.33-5.62l-10.35-13.27c-1.68-2.25-2.47-2.93-3.6-2.93-3.6,0-9.33,6.75-9.33,11.24,0,1.35.56,2.14.56,3.26,0,3.71-6.52,7.31-13.15,7.31s-11.47-3.71-11.47-7.65Z"/>
+</svg>

assets/js/app.js

@@ -27,3 +27,19 @@ if(activeTheme !== null){
     setTheme(activeTheme);
 }
 // permet de prendre en compte la dernière modification du theme.
+
+
+// navigation
+
+let navButton = document.querySelector(".btn--burger")
+ 
+navButton.addEventListener("click", toggleNavigation)
+ 
+function toggleNavigation() {
+ if (!document.body.hasAttribute("data-menu")) {
+ document.body.setAttribute("data-menu", true);
+ 
+ } else {
+ document.body.removeAttribute("data-menu");
+ }
+}

index.html

@@ -29,19 +29,116 @@
     <script src="assets/js/app.js" defer></script>
 </head>
 
-<title>RUX</title>
-</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">
-    <h1 class="title">RUX</h1>
-     <!--<pre class="language-css" tabindex="0"><code class="language-css"><span class="token selector">.awesome-layouts</span> <span class="token punctuation">{</span>
+    <!-- <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>
+
+
+        <div class="header__linklogo">
+
+            <a href="index.html">
+                <?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 233.75 71.07">
+                    <defs>
+                        <style>
+                            .cls-1 {
+                                fill: #fff;
+                            }
+                        </style>
+                    </defs>
+                    <path class="cls-1"
+                        d="m76.58,53.64c2.59,0,2.92,1.8,2.92,2.81,0,6.97-13.83,14.17-20.91,14.17-15.52,0-24.85-25.08-30.81-25.08-1.91,0-1.57,2.7-1.57,6.75-.11,3.49.22,4.16,2.47,6.18,1.35,1.24,1.91,2.14,1.91,3.15,0,4.61-9.11,9.44-16.42,9.44S.45,66.12.45,62.52c0-1.12.67-2.02,3.15-3.37,2.7-1.57,3.04-3.37,3.26-23.5.22-14.62.45-18.89-.67-20.02-1.91-1.91-6.18-2.25-6.18-5.74C0,1.69,22.83.68,30.13.68c17.88,0,31.37,7.2,31.37,16.76.11,10.23-14.39,20.35-14.39,22.15,0,2.7,14.17,15.63,22.49,15.63,2.92,0,4.61-1.57,6.97-1.57Zm-35.54-31.03c0-5.51-5.85-12.26-10.46-12.26-3.37,0-4.5,3.71-4.5,14.28v8.66c0,3.15,1.46,3.82,2.14,3.82,5.06,0,12.82-8.66,12.82-14.5Z" />
+                    <path class="cls-1"
+                        d="m119.69,59.83c0-2.93-.11-4.5-.79-4.5-.56,0-1.24.79-2.25,2.59-4.83,8.55-11.58,13.16-19,13.16-10.12,0-15.74-11.58-15.74-25.41-.11-17.2,8.43-45.66,25.75-45.66,2.93,0,4.05.79,4.05,2.03,0,1.01-.56,2.02-1.12,2.7-3.04,3.04-7.76,21.81-7.87,32.39,0,2.93-1.01,17.09,5.4,17.09,7.2.11,11.81-22.27,12.37-31.71.56-8.55-2.47-7.31-2.47-12.15,0-7.53,13.38-9.33,19.11-9.33s9,1.91,9,5.17c0,2.93-5.28,5.17-7.08,8.32-1.24,2.25-1.46,12.71-1.46,26.99v8.88c0,4.61,1.68,6.97,5.17,6.97,2.93,0,4.39-2.13,7.2-2.13,1.91,0,3.04.9,3.04,3.15,0,1.57-.45,2.25-6.18,6.52-5.51,4.16-10.91,6.18-16.19,6.18-7.2,0-10.91-3.71-10.91-11.24Z" />
+                    <path class="cls-1"
+                        d="m155.38,63.42c0-2.36,1.8-3.82,4.39-4.72,1.91-.67,4.61-1.46,6.52-2.7,6.29-4.5,16.19-13.05,16.19-16.19,0-1.8-12.37-20.58-14.51-22.38-3.15-2.59-8.21-1.35-8.21-4.5,0-4.16,17.43-12.93,25.53-12.93,2.02,0,3.15.56,3.15,1.91,0,.9-.11,2.25-.34,4.16-.45,4.05,1.91,9,6.97,15.85,2.47,3.49,3.37,4.05,4.5,4.05,3.26,0,11.58-7.76,11.58-10.23,0-.9-1.24-1.57-2.7-2.47-2.36-1.35-3.6-2.36-3.6-3.94,0-3.93,11.47-9,20.46-9,5.06,0,8.43,1.57,8.43,3.82,0,1.57-1.57,3.26-5.17,6.86l-21.92,22.26c-2.02,2.02.79,7.08,2.02,8.66l7.31,9.45c3.49,4.5,3.94,6.07,9,6.07,3.26-.11,4.72.67,4.72,2.36,0,5.17-9.44,11.24-17.65,11.24-2.48,0-6.3-1.68-9.33-5.62l-10.35-13.27c-1.68-2.25-2.47-2.93-3.6-2.93-3.6,0-9.33,6.75-9.33,11.24,0,1.35.56,2.14.56,3.26,0,3.71-6.52,7.31-13.15,7.31s-11.47-3.71-11.47-7.65Z" />
+                </svg>
+
+
+            </a>
+
+        </div>
+
+        <div class="header--second">
+
+
+            <button class="btn--burger">
+                <svg width="39" height="7" viewBox="0 0 39 7" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path
+                        d="M19.5 7C17.567 7 16 5.433 16 3.5V3.5C16 1.567 17.567 4.08341e-07 19.5 3.23847e-07V3.23847e-07C21.433 2.39353e-07 23 1.567 23 3.5V3.5C23 5.433 21.433 7 19.5 7V7Z"
+                        fill="white" />
+                    <path
+                        d="M35.5 7C33.567 7 32 5.433 32 3.5V3.5C32 1.567 33.567 4.08341e-07 35.5 3.23847e-07V3.23847e-07C37.433 2.39353e-07 39 1.567 39 3.5V3.5C39 5.433 37.433 7 35.5 7V7Z"
+                        fill="white" />
+                    <path
+                        d="M3.5 7C1.567 7 -6.84959e-08 5.433 -1.5299e-07 3.5V3.5C-2.37484e-07 1.567 1.567 4.08341e-07 3.5 3.23847e-07V3.23847e-07C5.433 2.39353e-07 7 1.567 7 3.5V3.5C7 5.433 5.433 7 3.5 7V7Z"
+                        fill="white" />
+                </svg>
+
+            </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">
+
+                <nav>
+
+                    <ul class="list--header">
+                        <li>
+                            <a class="link link--header link--active" href="index.html">accueil</a>
+                        </li>
+
+                        <li>
+                            <a class="link link--header" href="experience.html">expérience</a>
+                        </li>
+
+                    </ul>
+
+                </nav>
+
+            </div>
+
+        </div>
+
+    </header>
+
+    <div class="header__navigation--m">
+        <ul class="list__m--header">
+            <li>
+                <a class="link mlink--header mlink--active" href="index.html">accueil</a>
+            </li>
+
+            <li>
+                <a class="link mlink--header" href="experience.html">expérience</a>
+            </li>
+        </ul>
+        <div class="btn__lightdark--block">
+        </div>
+
+    </div>
+    <section class="headback">
+        <div class="fond">
+            <img class="headtitle" src="/assets/images/headlogo.png"></img>
+        </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>-->
-<p>Le pouvoir de l'amitié ! Meeting minutes</p>
-
+        <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
+        navigation facile et rapide”</section><a href="#partie1" class="nav__link link--visited link--color">Que le spectacle commence ! 👏 </a>
 </body>
 
 </html>