Add files via upload

My-Website.css

@@ -20,7 +20,7 @@ body {
 
 .section1, .section2, .section3 {
 
-  margin: 0px 15px 15px 75px;
+  margin: 0px 10px 15px 75px;
 
 }
 
@@ -33,7 +33,7 @@ body {
   font-size: 2em;
   color: #6d47ff;
   margin-bottom: 10.5px;
-  width: 180px;
+  width: max-content;
 
 }
 
@@ -220,8 +220,8 @@ body {
   background-color: white;
   padding: 15px 15px 15px 22.5px;
   width: 750px;
-  margin-bottom: 17px;
-  margin-top: 17px;
+  margin-bottom: 18px;
+  margin-top: 18px;
   border-radius: 8px;
   border: 1px #6d47ff solid;
 
@@ -393,12 +393,90 @@ body.active ::-moz-placeholder {
 
 }
 
+body.active .btnParametres {
+
+  background-color: #292837;
+
+}
+
+body.active .shortcut {
+
+  background-color: #292837;
+
+}
+
 /*-----Bouton Ecran-----*/
 
-.btnEcran {
+.btnParametres {
 
-  width: 40px;
+  width: max-content;
+  padding: 4px;
+  position: relative;
+  top: 10px;
+  margin-bottom: 25px;
   cursor: pointer;
+  background-color: white;
+  border-radius: 5px;
+  border: 1px #6d47ff solid;
+
+}
+
+.imgShortcut {
+
+  width: 80px;
+  height: 80px;
+  display: block; 
+  margin: 0 auto;
+
+}
+
+.boxShortcut {
+
+  display: flex;
+  justify-content: center;
+  text-align: center;
+  gap: 100px;
+  position: relative;
+  top: 100px;
+
+}
+
+.shortcut {
+
+  background-color: white;
+  padding: 40px 20px 40px 20px;
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  gap: 30px;
+  border-radius: 15px;
+  border: 1px #6d47ff solid;
+  width: 420px;
+
+}
+
+.lienShortcut:hover {
+
+  color: red;
+
+}
+
+.lienShortcut {
+
+  color: #6d47ff;
+  font-size: 1.1em;
+  letter-spacing: 0.5px;
+  width: max-content;
+  display: block; 
+  margin: 0 auto;
+  transition: 2s;
+
+}
+
+.titreShortcut {
+
+  font-size: 2em;
+  font-weight: 600;
 
 }
 
@@ -424,10 +502,28 @@ body.active ::-moz-placeholder {
 
 }
 
+/*-----Vu pour petit ecran-----*/
+
+@media screen and (max-width: 1080px) {
+
+  .shortcut {
+
+    width: 330px;
+
+  }
+
+}
+
 /*-----Vu pour tablette-----*/
 
-@media screen and (max-width: 1023px) {
+@media screen and (max-width: 900px) {
+
+  .boxShortcut {
+
+    display: none;
 
+  }
+
   .recherche {
 
     width: 300px;

My-Website.js

@@ -1,8 +1,8 @@
 //------Pour que le site soit securise------\\
 
-if (window.location.protocol != "https:") {
+/*if (window.location.protocol != "https:") {
   window.location.protocol="https:";
-}
+}*/
 
 //------Element html------\\
 
@@ -18,8 +18,8 @@ const image1 = document.querySelector('#btn1 .img');
 const image2 = document.querySelector('#btn2 .img');
 const image3 = document.querySelector('#btn3 .img');
 const body = document.querySelector('body');
-const btnDark = document.querySelector('.btnDark');
-const BtnEcran = document.querySelector('.btnEcran');
+const btnDark = document.querySelector('.dark');
+const BtnEcran = document.querySelector('.ecran');
 const Recherche = document.querySelector('.recherche');
 const resultats = document.querySelector('.resultats');
 const txtRecherche = document.querySelector('.txtRecherche');

index.html

@@ -46,8 +46,23 @@
 
     <div id="section3" class="section3">
       <p class="titre">Paramètres</p>
-      <div class="btnDark">Test1</div>
-      <div class="btnEcran">Test2</div>
+      <div class="btnParametres dark">Test1</div>
+      <div class="btnParametres ecran">Test2</div>
+      <p>Raccourcis pour le site</p>
+      <div class="boxShortcut">
+        <div class="shortcut">
+          <img class="imgShortcut" src="ubuntu.png" alt="Ubuntu">
+          <p class="titreShortcut">Ubuntu</p>
+          <p>Sauvegarder dans Telechargement et éxécutez "Launch-Shortcut"</p>
+          <a class="lienShortcut" href="My-Website-Shortcut-Ubuntu.zip">Télécharger pour ubuntu</a>
+        </div>
+        <div class="shortcut">
+          <img class="imgShortcut" src="windows.png" alt="Windows">
+          <p class="titreShortcut">Windows</p>
+          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem.</p>
+          <a class="lienShortcut" href="Attente.zip">attente</a>
+        </div>
+      </div>
     </div>
 
     <!-----Barre de navigation----->