From 620126c1b4921971e1d1988a13f9277c4453c08d Mon Sep 17 00:00:00 2001 From: vuvnguyen95 Date: Tue, 13 Feb 2024 14:22:34 -0500 Subject: [PATCH] re-update header for github --- .DS_Store | Bin 6148 -> 6148 bytes index.html | 22 ++++++++++------------ script.js | 2 +- styles.css | 49 ++++++++++++++++++++++++++++--------------------- 4 files changed, 39 insertions(+), 34 deletions(-) diff --git a/.DS_Store b/.DS_Store index cf438c7373eca1ae6373f440e9b22d901d17396c..6921a10e84f9d1d4f6486306bc15a55347cdf3b5 100644 GIT binary patch delta 14 VcmZoMXffFEgNc!0^G_yjQ2;491mXYy delta 14 VcmZoMXffFEgNc!G^G_yjQ2;4F1mgez diff --git a/index.html b/index.html index d0699dc..c14f41d 100644 --- a/index.html +++ b/index.html @@ -9,18 +9,16 @@
- + + + Home + About + Skills + Projects +
diff --git a/script.js b/script.js index b170ce0..abe8633 100644 --- a/script.js +++ b/script.js @@ -1,5 +1,5 @@ document.addEventListener("DOMContentLoaded", (e) => { - const menuLinks = document.querySelectorAll("nav #menu a"); + const menuLinks = document.querySelectorAll(".menu a"); menuLinks.forEach((link) => { link.addEventListener("click", function (e) { e.preventDefault(); diff --git a/styles.css b/styles.css index 8ad635d..73331b4 100644 --- a/styles.css +++ b/styles.css @@ -9,8 +9,8 @@ overflow-x: scroll; display: flex; flex-wrap: nowrap; - width: 100vw; /* Adjust if needed */ - height: 100vh; /* Adjust if needed */ + width: 100vw; + height: 100vh; } body, @@ -35,46 +35,53 @@ html { z-index: 1000; border-bottom: 2px solid #f4f4f4; padding: 20px; - display: flex; - justify-content: space-between; - align-items: center; - padding: 20px; + display: flex; + flex: 1; + flex-direction: row; + justify-content: space-between; + align-items: flex-start; + padding: 20px; } .heading span { - color: #ffffff; - font-size: 1.5em; - letter-spacing: 2px; - margin-left: 20px; + color: #ffffff; + font-size: 1.5em; + letter-spacing: 2px; } -#logo { - position: relative; +.logo { display: flex; align-items: center; + flex-shrink: 0; } -#logo img { - width: 90px; /* Adjust as needed */ +.logo h1 { + color: #ffffff; + font-size: 1.3em; + letter-spacing: 2px; + margin-left: 10px; + font-weight: bold; + text-transform: uppercase; + text-decoration: none; + cursor: pointer; + transition: color 0.3s; +} + +.logo img { + width: 90px; + flex-shrink: 0; } #menu { - position: relative; - padding-left: 20px; - left: 30%; display: flex; - align-items: center; justify-content: space-between; - gap: 25%; } #menu a { text-decoration: none; - text-emphasis: bold; font-size: large; color: #ffffff; padding: 20px; border-radius: 5px; transition: background-color 0.3s; - } #menu a:hover {