From 9df1b9c8d585205855f09f1c3e4ddc79e8a633f2 Mon Sep 17 00:00:00 2001 From: vuvnguyen95 Date: Sun, 11 Feb 2024 22:04:53 -0500 Subject: [PATCH] update header --- index.html | 13 +++++-------- script.js | 15 ++------------- styles.css | 13 +++++++++++-- 3 files changed, 18 insertions(+), 23 deletions(-) diff --git a/index.html b/index.html index cda4478..9dcac8c 100644 --- a/index.html +++ b/index.html @@ -8,7 +8,7 @@ - @@ -133,7 +132,7 @@

Description

- +
Project 1 Image
@@ -175,8 +174,6 @@

Description

- -
diff --git a/script.js b/script.js index 2969006..b170ce0 100644 --- 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 index a7a3c54..d8df1fb 100644 --- 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;