update header

vuvnguyen95 · Feb 12, 2024 · 9df1b9c · 9df1b9c
1 parent 206c939
commit 9df1b9c
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 23 deletions.
diff --git a/index.html b/index.html
@@ -8,7 +8,7 @@
     <link rel="stylesheet" href="styles.css" />
   </head>
   <body>
-    <div id="header" class="heading">
+    <div class="heading">
       <nav>
         <div id="logo">
           <img src="./images/logo2.png" alt="Logo" width="5%" />
@@ -92,10 +92,9 @@ <h2>Skills</h2>
             </div>
             <div class="next-button">
               <span class="next-button-polygon"></span>
-              <span class="next-button-text">
-                <p>Next Page &#x25B6;</p>
-                <span class="next-button-addon1"></span>
-              </div>
+              <span class="next-button-text"><p>Next Page &#x25B6;</p></span>
+
+              <span class="next-button-addon1"></span>
             </div>
           </div>
         </div>
@@ -133,7 +132,7 @@ <h3>Description</h3>
               </div>
             </div>
             <div id="project2" class="project-detail">
-              <!-- Content for project 1 -->
+              <!-- Content for project 2 -->
               <div class="project-detail-img">
                 <img src="./images/background2.jpg" alt="Project 1 Image" />
               </div>
@@ -175,8 +174,6 @@ <h3>Description</h3>
             </div>
           </div>
         </div>
-        <button id="project-prev">&lt;</button>
-        <button id="project-next">&gt;</button>
       </section>
     </div>
     <div id="contact-expand" class="contact-expand">

diff --git a/script.js b/script.js
@@ -23,7 +23,7 @@ document.addEventListener("DOMContentLoaded", (e) => {
       skillsInfo.style.opacity = 0;
       setTimeout(() => {
         backgroundInfo.style.opacity = 1;
-      });
+      },0);
     } else {
         skillsInfo.style.display = "block";
       backgroundInfo.style.display = "none";
@@ -32,10 +32,8 @@ document.addEventListener("DOMContentLoaded", (e) => {
       backgroundInfo.style.opacity = 0;
       setTimeout(() => {
         skillsInfo.style.opacity = 1;
-      });
-
+      },0);
     }
-
   });
 
 
@@ -95,13 +93,4 @@ document.addEventListener("DOMContentLoaded", (e) => {
       behavior: "smooth",
     });
   });
-
-  const projectContainer = document.querySelector("#projects");
-  document.querySelector("#project-prev").addEventListener("click", () => {
-    projectContainer.scrollLeft -= 200; // Adjust as needed
-  });
-
-  document.querySelector("#project-next").addEventListener("click", () => {
-    projectContainer.scrollLeft += 200; // Adjust as needed
-  });
 });
diff --git a/styles.css b/styles.css
@@ -4,7 +4,15 @@
   padding: 0;
   box-sizing: border-box;
 }
-
+.horizontal-scroll-container {
+    scroll-snap-type: x mandatory;
+    overflow-x: scroll;
+    display: flex;
+    flex-wrap: nowrap;
+    width: 100vw; /* Adjust if needed */
+    height: 100vh; /* Adjust if needed */
+  }
+
 body,
 html {
   height: 100%;
@@ -73,6 +81,7 @@ header {
 /* Sections */
 section {
   margin-bottom: 40px;
+  scroll-snap-align: start;
 }
 
 h1,
@@ -224,7 +233,7 @@ img {
 .next-button-addon1 {
   position: absolute;
   left: 170px;
-  top: 39px;
+  top: 93px;
   width: 30px;
   height: 6px;
   background-color: #b1b0b0;