[+] Little animations in home

FuniclemDev · Jun 28, 2024 · 833b9b9 · 833b9b9
1 parent a05b04b
commit 833b9b9
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 6 deletions.
diff --git a/home.html b/home.html
@@ -20,8 +20,9 @@
         <img src="img/photo-profil.jpg" alt="Photo de Funiclem" class="profile-pic">
         <div class="profile-info">
             <h1>Clément DORGE</h1>
-            <p>19 ans</p>
-            <p>Étudiant à Epitech Strasbourg, 2ème année, promo 2028</p>
+            <h3>19 ans</h3>
+            <p>Étudiant à Epitech Strasbourg</p>
+            <p>2ème année, promo 2028</p>
         </div>
     </main>
     <script src="script.js"></script>

diff --git a/styles.css b/styles.css
@@ -3,9 +3,10 @@ body {
     margin: 0;
     padding: 0;
     display: flex;
-    justify-content: center;
+    flex-direction: column;
     align-items: center;
     height: 100vh;
+    overflow-x: hidden;
 }
 
 header {
@@ -14,8 +15,10 @@ header {
     padding: 10px 0;
     text-align: center;
     width: 100%;
-    position: absolute;
+    position: fixed;
     top: 0;
+    left: 0;
+    z-index: 1000;
 }
 
 nav ul {
@@ -25,12 +28,21 @@ nav ul {
 
 nav ul li {
     display: inline;
-    margin: 0 10px;
+    margin: 0 20px;
 }
 
 nav ul li a {
     color: #fff;
     text-decoration: none;
+    font-size: 18px; /* Base font size */
+    padding: 10px 20px; /* Increase clickable area */
+    display: inline-block; /* Allow padding to expand clickable area */
+    transition: color 0.3s ease, font-size 0.3s ease;
+}
+
+nav ul li a:hover {
+    color: #b80e22;
+    font-size: 24px; /* Enlarged font size on hover */
 }
 
 main.profile {
@@ -39,6 +51,17 @@ main.profile {
     justify-content: center;
     flex-direction: row;
     width: 80%;
+    margin-top: 130px;
+    animation: fadeIn 1.5s ease-in;
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
 }
 
 .profile-pic {
@@ -47,14 +70,41 @@ main.profile {
     height: 33vw;
     object-fit: cover;
     margin-right: 20px;
+    transition: transform 0.3s ease;
+}
+
+.profile-pic:hover {
+    transform: scale(1.1);
 }
 
 .profile-info h1 {
     margin: 0;
     padding: 0;
 }
 
-.profile-info p {
+.profile-info p, .profile-info h3 {
     margin: 5px 0;
     padding: 0;
+    transition: transform 0.3s ease, opacity 0.3s ease;
+}
+
+.profile-info p:hover, .profile-info h3:hover {
+    transform: translateX(10px);
+    opacity: 0.7;
+}
+
+.profile-info {
+    margin-left: 30px;
+    animation: slideIn 1s ease-out;
+}
+
+@keyframes slideIn {
+    from {
+        transform: translateX(-100%);
+        opacity: 0;
+    }
+    to {
+        transform: translateX(0);
+        opacity: 1;
+    }
 }