Added a navbar file, and a stlyes css file

O662 · Dec 27, 2024 · 6ffc37d · 6ffc37d
1 parent fabe561
commit 6ffc37d
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -5,6 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Malcolm Ferguson</title>
     <link rel="icon" type="image/x-icon" href="/favicon.ico">
+    <link rel="stylesheet" href="styles.css">
     <style>
         body {
             font-family: Arial, sans-serif;
@@ -46,6 +47,14 @@
 </head>
 
 <body>
+    <div id="navbar"></div>
+    <script>
+        fetch('navbar.html')
+            .then(response => response.text())
+            .then(data => {
+                document.getElementById('navbar').innerHTML = data;
+            });
+    </script>
     <section id="header">
         <h1>Malcolm Ferguson</h1>
         <p>Welcome to My Website!</p>

diff --git a/navbar.html b/navbar.html
@@ -0,0 +1,9 @@
+<nav class="navbar">
+    <ul>
+        <li><a href="index.html">Home</a></li>
+        <li><a href="About.html">About</a></li>
+        <li><a href="Projects.html">Projects</a></li>
+        <li><a href="Works.html">Works</a></li>
+        <li><a href="Contact.html">Contact</a></li>
+    </ul>
+</nav>
diff --git a/styles.css b/styles.css
@@ -0,0 +1,50 @@
+body, html {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+.navbar {
+    position: -webkit-sticky; /* For Safari */
+    position: sticky;
+    top: 0;
+    background-color: #333;
+    padding: 10px 0;
+    z-index: 1000; /* Ensures it stays on top */
+}
+
+.navbar ul {
+    list-style: none;
+    display: flex;
+    justify-content: space-around;
+    padding: 0;
+    margin: 0;
+}
+
+.navbar li {
+    display: inline;
+}
+
+.navbar a {
+    color: white;
+    text-decoration: none;
+    padding: 10px 20px;
+    display: block;
+}
+
+.navbar a:hover {
+    background-color: #575757;
+}
+
+section {
+    height: 100vh; /* Full viewport height */
+    padding: 20px;
+}
+
+section:nth-of-type(odd) {
+    background-color: #000000;
+}
+
+section:nth-of-type(even) {
+    background-color: #e2e2e2;
+}