Petites modif sur la page de présentation

WEB/View/src/CSS/Pres.css

@@ -1,134 +0,0 @@
-/*Fonts CSS */
-
-@font-face {
-    font-family: Fauna;
-    src: url("../../assets/fonts/Fauna.ttf");
-  }
-  @font-face {
-    font-family: Equinox;
-    src: url("../../assets/fonts/Equinox.otf");
-  }
-  /* End Fonts CSS */
-  html {
-    scroll-behavior: smooth;
-  }
-  
-  body {
-    min-height: 100vh;
-    font-family: "Equinox", sans-serif;
-    color: white;
-    height: 100vh;
-    background-position: center center;
-    background-attachment: fixed;
-    background-repeat: no-repeat;
-    background-size: cover;
-    background-color: #050e15;
-  }
-  
-  /* Navbar CSS */
-  
-  nav {
-    background-color: #050e15;
-  }
-  
-  /* Moving fox CSS */
-  
-  .moving-fox {
-    position: relative;
-    top: 0;
-    z-index: -1;
-    opacity: 0;
-  }
-  
-  /* Section Histoire */
-  
-  section {
-    min-height: 60vh;
-    margin-bottom: 10px;
-  }
-  
-  .hidden {
-    opacity: 0;
-    filter: blur(10px);
-    transform: translateX(-100px);
-    transition: all 1.2s;
-  }
-  
-  .show {
-    opacity: 1;
-    filter: blur(0px);
-    transform: translateX(0px);
-  }
-  
-  @media (prefers-reduced-motion) {
-    .hidden {
-      transition: none;
-    }
-  }
-  
-  p {
-    font-family: "Fauna", sans-serif;
-    font-size: 20px;
-  }
-  
-  /* Scroll down arrow */
-  
-  .scroll-down {
-    position: absolute;
-    bottom: 15px;
-    left: 50%;
-    margin-left: -16px;
-    display: block;
-    width: 40px;
-    height: 40px;
-    border: 2px solid #fff;
-    background-size: 14px auto;
-    border-radius: 50%;
-    z-index: 2;
-    -webkit-animation: bounce 2s infinite 2s;
-    animation: bounce 2s infinite 2s;
-    -webkit-transition: all 0.2s ease-in;
-    transition: all 0.2s ease-in;
-  }
-  
-  .scroll-down:before {
-    position: absolute;
-    top: calc(50% - 8px);
-    left: calc(50% - 6px);
-    transform: rotate(-45deg);
-    display: block;
-    width: 12px;
-    height: 12px;
-    content: "";
-    border: 2px solid white;
-    border-width: 0px 0 2px 2px;
-  }
-  
-  @keyframes bounce {
-    0%,
-    100%,
-    20%,
-    50%,
-    80% {
-      transform: translateY(0);
-      -webkit-transform: translateY(0);
-      -ms-transform: translateY(0);
-      -moz-transform: translateY(0);
-      -o-transform: translateY(0);
-    }
-    40% {
-      transform: translateY(-10px);
-      -webkit-transform: translateY(-10px);
-      -ms-transform: translateY(-10px);
-      -moz-transform: translateY(-10px);
-      -o-transform: translateY(-10px);
-    }
-    60% {
-      transform: translateY(-5px);
-      -webkit-transform: translateY(-5px);
-      -ms-transform: translateY(-5px);
-      -moz-transform: translateY(-5px);
-      -o-transform: translateY(-5px);
-    }
-  }
-  

WEB/View/src/CSS/Presentation.css

@@ -0,0 +1,142 @@
+/*Fonts CSS */
+
+@font-face {
+  font-family: Fauna;
+  src: url("../../assets/fonts/Fauna.ttf");
+}
+@font-face {
+  font-family: Equinox;
+  src: url("../../assets/fonts/Equinox.otf");
+}
+/* End Fonts CSS */
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  min-height: 100vh;
+  font-family: "Equinox", sans-serif;
+  color: white;
+  height: 100vh;
+  background-position: center center;
+  background-attachment: fixed;
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-color: #050e15;
+}
+
+/* Navbar CSS */
+
+nav {
+  background-color: #050e15;
+}
+
+/* Moving fox CSS */
+
+.moving-fox {
+  position: relative;
+  top: 0;
+  z-index: -1;
+  opacity: 0;
+}
+
+/* Section Histoire */
+
+section {
+  min-height: 60vh;
+  margin-bottom: 10px;
+}
+
+.hidden {
+  opacity: 0;
+  filter: blur(10px);
+  transform: translateX(-100px);
+  transition: all 1.2s;
+}
+
+.show {
+  opacity: 1;
+  filter: blur(0px);
+  transform: translateX(0px);
+}
+
+@media (prefers-reduced-motion) {
+  .hidden {
+    transition: none;
+  }
+}
+
+p {
+  font-family: "Fauna", sans-serif;
+  font-size: 20px;
+}
+
+a {
+  color: #44fff6;
+  text-decoration: none;
+}
+
+a:hover {
+  color: #44fff6;
+}
+
+/* Scroll down arrow */
+
+.scroll-down {
+  position: absolute;
+  bottom: 15px;
+  left: 50%;
+  margin-left: -16px;
+  display: block;
+  width: 40px;
+  height: 40px;
+  border: 2px solid #fff;
+  background-size: 14px auto;
+  border-radius: 50%;
+  z-index: 2;
+  -webkit-animation: bounce 2s infinite 2s;
+  animation: bounce 2s infinite 2s;
+  -webkit-transition: all 0.2s ease-in;
+  transition: all 0.2s ease-in;
+}
+
+.scroll-down:before {
+  position: absolute;
+  top: calc(50% - 8px);
+  left: calc(50% - 6px);
+  transform: rotate(-45deg);
+  display: block;
+  width: 12px;
+  height: 12px;
+  content: "";
+  border: 2px solid white;
+  border-width: 0px 0 2px 2px;
+}
+
+@keyframes bounce {
+  0%,
+  100%,
+  20%,
+  50%,
+  80% {
+    transform: translateY(0);
+    -webkit-transform: translateY(0);
+    -ms-transform: translateY(0);
+    -moz-transform: translateY(0);
+    -o-transform: translateY(0);
+  }
+  40% {
+    transform: translateY(-10px);
+    -webkit-transform: translateY(-10px);
+    -ms-transform: translateY(-10px);
+    -moz-transform: translateY(-10px);
+    -o-transform: translateY(-10px);
+  }
+  60% {
+    transform: translateY(-5px);
+    -webkit-transform: translateY(-5px);
+    -ms-transform: translateY(-5px);
+    -moz-transform: translateY(-5px);
+    -o-transform: translateY(-5px);
+  }
+}

WEB/View/src/pages/Presentation.html

@@ -1,49 +1,36 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Présentation</title>
-    <link
+  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
-      rel="stylesheet"
+    integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous" />
-      href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
+  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
-      integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
-      crossorigin="anonymous"
-    />
-    <script
-      src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
     integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
-      crossorigin="anonymous"
+    crossorigin="anonymous"></script>
-    ></script>
+  <script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"
-    <script
-      src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"
     integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
-      crossorigin="anonymous"
+    crossorigin="anonymous"></script>
-    ></script>
   <script defer src="./View/src/JS/Presentation.js"></script>
-    <link rel="stylesheet" href="./View/src/CSS/Pres.css" />
+  <link rel="stylesheet" href="./View/src/CSS/Presentation.css" />
 </head>
+
 <body>
-    <nav class="navbar navbar-expand-lg navbar-dark fixed-top">
+  <nav class="navbar navbar-expand-lg navbar-dark fixed-top d-flex justify-content-between user-select-none p-3">
-      <div class="container-fluid mx-0">
     <div class="nav-item nav-link">
       <a class="navbar-brand" href="index.php?action=goToHome">Home</a>
     </div>
-        <div class="mx-auto">
+    <div>
-          <h5
+      <h5 class="text-uppercase" style="color: #fff; font-weight: bold; font-size: 22px">
-            class="m-1 text-uppercase"
-            style="color: #fff; font-weight: bold; font-size: 22px"
-          >
         Northgan
       </h5>
     </div>
-        <div class="nav-link">
+    
-          <a class="navbar-brand" href="index.php?action=goToSolo">Skip</a>
-        </div>
     <div class="nav-link">
       <a class="navbar-brand" href="index.php?action=goToTest">Next</a>
     </div>
-      </div>
   </nav>
 
   <img src="./View/assets/img/BGPres2.png" class="img-fluid" />
@@ -80,29 +67,25 @@
 
           <section class="hidden row" style="min-height: 50vh">
             <p>
-                Clique sur le bouton NEXT pour commencer tes premiers pas dans
+              Clique sur le bouton <a href="index.php?action=goToTest">NEXT</a> pour commencer tes premiers pas dans
-                l'ère du développement.<br />
+              l'ère du développement, où je vais t'apprendre les bases !<br />
               <br />
-                Clique sur SKIP pour aller directement aux énigmes.
+               Si tu es déjà un boss, clique sur <a href="index.php?action=goToSolo">SKIP</a> pour aller directement aux énigmes.
             </p>
           </section>
         </div>
 
         <div class="col-3" id="fox">
-            <img
+          <img src="./View/assets/img/Foxy.png" alt="Logo" class="img-fluid rounded-circle moving-fox" style="
-              src="./View/assets/img/Foxy.png"
-              alt="Logo"
-              class="img-fluid rounded-circle moving-fox"
-              style="
                 border: 2px solid #44fff6;
                 background-image: url('View/assets/img/BackgroundMain.jpg');
                 background-size: cover;
                 background-position: center;
-              "
+              " />
-            />
         </div>
       </div>
     </div>
   </div>
 </body>
+
 </html>