Création des pages + responsive header

assets/css/header.css

@@ -0,0 +1,80 @@
+header {
+    overflow: hidden;
+    background-color: #f1f1f1;
+    padding: 20px 10px;
+}
+
+header h1 {
+    float: left;
+    font-size: 25px;
+    font-weight: bold;
+}
+
+#menu li {
+    display: inline;
+}
+
+#menu li.active a {
+    background-color: dodgerblue;
+    color: white;
+}
+
+#menu li a:hover {
+    background-color: #ddd;
+    color: black;
+}
+
+#menu li a {
+    color: black;
+    padding: 12px;
+    text-decoration: none;
+    font-size: 18px; 
+    line-height: 25px;
+    border-radius: 4px;
+}
+
+#burger-menu {
+    transform: translateY(25%);
+}
+
+@media screen and (min-width: 700px) {
+    #menu li a {
+        border-radius: 4px;
+    }
+    .visible {
+        display:block;
+    }
+    #menu {
+        float: right;
+        /*display: block;*/
+    }
+
+    #burger-menu {
+        display: none;
+        float: right;
+    }
+}
+
+@media screen and (max-width: 700px) {
+    .invisible {
+display : none;
+
+    }
+    #menu li a {
+      float: none;
+      display: block;
+      text-align: left;
+    }
+    
+    #menu {
+      float: none;
+      /*display: none;*/
+      margin-top: 80px;
+      padding: 0;
+    }
+
+    #burger-menu {
+        display: block;
+        float: right;
+    }
+}

assets/css/style.css

@@ -0,0 +1,3 @@
+body {
+    margin: 0;
+}

assets/img/close-menu.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<svg fill="#000000" height="40px" width="40px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512" xml:space="preserve">
+    <g>
+        <g>
+            <polygon points="512,59.076 452.922,0 256,196.922 59.076,0 0,59.076 196.922,256 0,452.922 59.076,512 256,315.076 452.922,512 
+                512,452.922 315.076,256 		"/>
+        </g>
+    </g>
+</svg>

assets/img/open-menu.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<svg fill="#000000" height="40px" width="40px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 80" xml:space="preserve">
+    <rect width="100" height="20" rx="8"></rect>
+    <rect y="30" width="100" height="20" rx="8"></rect>
+    <rect y="60" width="100" height="20" rx="8"></rect>
+</svg>

assets/js/header.js

@@ -0,0 +1,12 @@
+function burgerMenu() {
+    const btn = document.getElementById("burger-menu");
+    const menu = document.getElementById("menu");
+
+    if (btn.src.endsWith("assets/img/open-menu.svg")) {
+        btn.src = btn.src.replace("open-menu.svg", "close-menu.svg");
+        menu.className = "";
+    } else {
+        btn.src = btn.src.replace("close-menu.svg", "open-menu.svg");
+        menu.className = "invisible";
+    }
+}