Update index.html

Lin-Yuying · Jan 18, 2025 · 0684db6 · 0684db6
1 parent 272e41d
commit 0684db6
Showing 1 changed file with 30 additions and 38 deletions.
diff --git a/index.html b/index.html
@@ -15,7 +15,7 @@
       align-items: center;
       justify-content: center;
       flex-direction: column;
-      min-height: 120vh; /* Ensure the page is tall enough to require scrolling must be > 100vh*/
+      min-height: 120vh; /* Ensure the page is tall enough to require scrolling */
       background-color: #f1f1f1;
       margin: 0;
       transition: opacity 0.5s ease; /* Animation for fade-in effect */
@@ -76,7 +76,34 @@
       line-height: 1.6;
     }
 
-   /* Scroll-Down Icon */
+    /* Image Gallery */
+    .image-gallery {
+      display: flex;
+      position: absolute;
+      justify-content: center; /* Center the items horizontally */
+      gap: 20px; /* Spacing between items */
+      margin-top: 20px; /* Adjust the margin if needed */
+      width: 100%; /* Ensures the gallery takes up the full width */
+      top: 80% !important; /* Moves the whole gallery to 80% of the container height */
+    }
+
+    .image-gallery .gallery-item {
+      width: 30px;
+      height: 30px;
+      border-radius: 50%;
+      overflow: hidden;
+      position: relative; /* Ensure items are positioned in the flex container */
+    }
+
+    .image-gallery img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      /* No need to apply top: 80% here */
+    }
+
+
+    /* Scroll-Down Icon */
     .scroll-down-div {
       position: absolute;
       bottom: 20px;
@@ -104,31 +131,6 @@
       }
     }
 
-    /* Image Gallery */
-    .image-gallery {
-      display: flex;
-      justify-content: top; /* Center the items horizontally */
-      align-items: top; /* Top the items vertically */
-      gap: 20px; /* Spacing between items */
-      margin-top: 10px; /* Added margin to give space from the top */
-      width: 100%; /* Ensures the gallery takes up the full width */
-      padding-left: 150px;
-
-    }
-
-    .image-gallery .gallery-item {
-      width: 30px;
-      height: 30px; 
-      border-radius: 50%;
-      overflow: hidden;
-    }
-
-    .image-gallery img {
-      width: 100%;
-      height: 100%;
-      object-fit: cover;
-    }
-
     /* Smooth Scroll Animation */
     .scrolling-animation {
       opacity: 0;
@@ -140,7 +142,7 @@
     }
 
     /* Responsive Adjustments */
-    @media (max-width: 768px) {
+    @media (max-width: 700px) {
       .top-section {
         flex-direction: column;
         transform: translate(-50%, -50%);
@@ -184,7 +186,6 @@ <h3>
       &nbsp;&nbsp;&nbsp;&nbsp;KEEP LOVING, KEEP LIVING.&nbsp;&nbsp;&nbsp;&nbsp;
     </h3>
   </div>
-
 
   <!-- Image Gallery centered below the text -->
   <div class="image-gallery">
@@ -239,22 +240,13 @@ <h2> / I AM <span class="type"> </span> /</h2>
       const scrollPosition = window.scrollY + window.innerHeight;
       const documentHeight = document.documentElement.scrollHeight;
 
-      // Log current scroll position for debugging
-      console.log("Current Scroll Position:", scrollPosition);
-      console.log("Document Height:", documentHeight);
-
-      // Check if the scroll position has passed 90% of the page height
       if (scrollPosition >= documentHeight * 0.9) { // 90% of the page height
-        console.log("User has reached 90% of the page. Redirecting...");
-        // Redirect to mainpage.html when the user reaches 90% of the page
         window.location.href = './mainpage.html';
       }
     }
 
-    // Add scroll event listener
     window.addEventListener('scroll', checkScrollPosition);
 
-    // Animation: When page loads, show the page content with fade-in effect
     window.onload = function () {
       document.body.classList.add('visible');
     };