update header

vuvnguyen95 · Feb 12, 2024 · f50c2e7 · f50c2e7
1 parent fa4df40
commit f50c2e7
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 16 deletions.
diff --git a/index.html b/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" id="top">
   <head>
     <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
@@ -14,7 +14,7 @@
           <img src="./images/logo2.png" alt="Logo" width="5%" />
           <span>Vu Nguyen</span>
           <span id="menu">
-            <a href="./index.html">Home</a>
+            <a href="#top">Home</a>
             <a href="#about">About</a>
             <a href="#skills">Skills</a>
             <a href="#projects">Projects</a>

diff --git a/styles.css b/styles.css
@@ -24,6 +24,7 @@ html {
   padding: 0px;
   min-width: 100%;
   scroll-behavior: initial;
+  scroll-snap-type: x mandatory;
 }
 
 .heading {
@@ -34,8 +35,16 @@ html {
   z-index: 1000;
   border-bottom: 2px solid #f4f4f4;
   padding: 20px;
-  flex: 1;
-  flex-direction: column;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 20px;
+}
+.heading span {
+    color: #ffffff;
+    font-size: 1.5em;
+    letter-spacing: 2px;
+    margin-left: 20px;
 }
 #logo {
   position: relative;
@@ -47,31 +56,25 @@ html {
   width: 90px; /* Adjust as needed */
 }
 
-#logo span {
-    position: relative;
-  margin-left: 10px;
-  margin-right: 15%;
-  color: #ffffff;
-  font-size: 1.5em;
-  justify-content: space-between;
-  gap: 20px;
-}
 #menu {
+  position: relative;
+  padding-left: 20px;
+  left: 30%;
   display: flex;
-  justify-content: space-between;
   align-items: center;
-  margin-left: 30%;
+  justify-content: space-between;
+  gap: 25%;
 }
 
 #menu a {
   text-decoration: none;
   text-emphasis: bold;
   font-size: large;
   color: #ffffff;
-  margin-left: 20%;
   padding: 20px;
   border-radius: 5px;
   transition: background-color 0.3s;
+
 }
 
 #menu a:hover {