From bc9a8f8b9091cb9646353e5095191dc12a53b092 Mon Sep 17 00:00:00 2001
From: Vital Vuillaume <vitalvuillaume@proton.me>
Date: Sun, 4 Feb 2024 18:32:11 +0100
Subject: [PATCH] Add files via upload

---
 My-Website.css | 69 +++++++++++++++++++++++++++++++++++++++++++++-----
 index.html     |  4 +--
 2 files changed, 65 insertions(+), 8 deletions(-)

diff --git a/My-Website.css b/My-Website.css
index fd504b1..4578d29 100644
--- a/My-Website.css
+++ b/My-Website.css
@@ -23,7 +23,7 @@
 
 body {
 
-  background-color: rgb(230, 230, 230);
+  background-color: rgb(210, 210, 210);
   min-height: 100vh;
 
 }
@@ -555,10 +555,13 @@ body.active ::placeholder, body.active ::-moz-placeholder {
 
 .imgShortcut {
 
-  width: 67px;
-  height: 67px;
+  width: 170px;
+  height: 170px;
   display: block; 
   margin: 0 auto;
+  position: relative;
+  top: 60px;
+  transition: 1.8s
 
 }
 
@@ -576,17 +579,46 @@ body.active ::placeholder, body.active ::-moz-placeholder {
 .shortcut {
 
   background-color: white;
-  padding: 40px 20px 40px 20px;
   display: flex;
   justify-content: center;
   flex-direction: column;
   gap: 30px;
   border-radius: 15px;
   border: 1px var(--couleur) solid;
-  width: 380px;
+  width: 360px;
+  height: 330px;
+  overflow: hidden;
   
 }
 
+.shortcut:hover .imgShortcut {
+
+  top: 0px;
+  width: 67px;
+  height: 67px;
+
+}
+
+.shortcut:hover .paraShortcut {
+
+  visibility: visible;
+  opacity: 1;
+
+}
+
+.shortcut:hover .lienShortcut {
+
+  visibility: visible;
+  opacity: 1;
+
+}
+
+.shortcut:hover .titreShortcut {
+
+  top: 0px;
+
+}
+
 .lienShortcut:hover {
 
   color: red;
@@ -601,7 +633,18 @@ body.active ::placeholder, body.active ::-moz-placeholder {
   width: max-content;
   display: block; 
   margin: 0 auto;
-  transition: 2s;
+  transition: 2.3s;
+  visibility: hidden;
+  opacity: 0;
+
+}
+
+.paraShortcut {
+
+  visibility: hidden;
+  opacity: 0;
+  transition: 2.3s;
+  padding: 0px 10px 0px 10px;
 
 }
 
@@ -609,6 +652,9 @@ body.active ::placeholder, body.active ::-moz-placeholder {
 
   font-size: 1.8em;
   font-weight: 600;
+  position: relative;
+  top: 50px;
+  transition: 1.8s;
 
 }
 
@@ -816,6 +862,17 @@ body.active ::placeholder, body.active ::-moz-placeholder {
     background-color: transparent;
   
   }
+  
+  .img {
+    transition: 0.2s;
+  }
+
+  .img:active {
+
+    transform: scale(0.8);
+    transition: 0.2s;
+
+  }
 
   .txt {
 
diff --git a/index.html b/index.html
index 80f0ba6..6899a40 100644
--- a/index.html
+++ b/index.html
@@ -105,13 +105,13 @@
         <div class="shortcut">
           <img class="imgShortcut" src="ubuntu.png" alt="Ubuntu">
           <p class="titreShortcut">Ubuntu</p>
-          <p>Sauvegarder-le exécutez "My-Website-Shortcut-Ubuntu.sh".</p>
+          <p class="paraShortcut">Sauvegarder-le exécutez "My-Website-Shortcut-Ubuntu.sh".</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="paraShortcut">Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem.</p>
           <a class="lienShortcut" href="Attente.zip">attente</a>
         </div>
       </div>