Changea

Finalthesis.html

@@ -15,9 +15,17 @@
 
 
   <container class="titledesign">
-    <img class="titlegif" src="assets/image/gif/mine/Sans-titre---1.gif">
+    <img class="titlegif" src="assets/image/gif/mine/Sans-titre---5.gif">
   </container>
 
+<container class="menu-title">
+    <div class="block">Abstract</div>
+    <div class="block">Chapter 1</div>
+    <div class="block">Chapter 2</div>
+    <div class="block">Chapter 3</div>
+    <div class="block">Conclusion</div>
+</container>
+
   <container class="menu">
     <div>
       <a href="#introduction"><img class="gif" src="assets/image/gif/giphy1.gif"></a>

assets/css/style.css

@@ -84,11 +84,32 @@
     width: 100vw;
 }
 
+.menu-title {
+    display: flex;
+    flex-direction: row;
+    row-gap: 40px;
+    justify-content: center;
+    margin-top: -70px;
+    margin-bottom: 100px;
+    text-align: center;
+}
+
+.block{
+    background-color: rgb(239, 153, 210);
+    width: 9%;
+    padding-top: 6px;
+    height: 35px;
+    margin-left: 8px;
+    margin-right: 8px;
+    font-family: 'JunicodeCondenced';
+    font-weight: bold;
+}
+
 .menu {
     display: flex;
     flex-direction: row;
     justify-content: center;
-    margin-top: -20px;
+    margin-top: -80px;
     margin-bottom: 100px;
     text-align: center;
 
@@ -303,6 +324,10 @@ body{
         font-size: 10px;
     }   
 
+    .menu-title {
+        display: none;
+    }
+
     .menu {
         display: flex;
         flex-direction: row;