Merge pull request #1 from TomyBDev/staging

Added working header
TomyBDev · Feb 2, 2024 · 5eed76d · 5eed76d
2 parents 0329429 + 361bba4
commit 5eed76d
Show file tree

Hide file tree

Showing 4 changed files with 72 additions and 32 deletions.
diff --git a/Objects/header.html b/Objects/header.html
@@ -1,10 +1,8 @@
-<header>
-    <nav>
-        <ul class="navbar">
-            <li class="navbaritem"><img class="logo" src="../images/cropped-smallerlogo.webp"></img></li>
-            <li class="navbaritem" style="margin-left: 30%;"></li>
-            <li class="navbaritem"><a class="navbaritemtext" href=":D">CV</a></li>
-            <li class="navbaritem"><a class="navbaritemtext" href="D:">Home</a></li>
-        </ul>
+<header class="header">
+    <img class="logo" src="../images/cropped-smallerlogo.webp"></img>
+    <div></div>
+    <nav class="navbar">
+        <a class="navbaritemtext" href="../cv.html">CV</a>
+        <a class="navbaritemtext" href="../index.html">Home</a>
     </nav>
   </header>
diff --git a/cv.html b/cv.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>ThomasB Porfolio</title>
+    <link rel="stylesheet" href="styles/global.css">
+    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
+  </head>
+
+  <body>
+    <div class="wholeapp">
+      <div></div>
+        <div class="mainbody">
+          <div id="nav-placeholder"></div>
+          <p>CV</p>
+        </div>
+      <div></div>
+    </div>
+
+    <script>
+      $(function(){
+        $("#nav-placeholder").load("objects/header.html");
+      });
+      </script>
+
+  </body>
+</html>
diff --git a/index.html b/index.html
@@ -5,16 +5,24 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>ThomasB Porfolio</title>
     <link rel="stylesheet" href="styles/global.css">
-    <link rel="stylesheet" href="objects/header.css">
+    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
   </head>
 
   <body>
     <div class="wholeapp">
       <div></div>
         <div class="mainbody">
-          <p>heaskldjaskld</p>
-        </div>
+          <div id="nav-placeholder"></div>
+            <p>Home</p>
+          </div>
       <div></div>
     </div>
+
+    <script>
+      $(function(){
+        $("#nav-placeholder").load("objects/header.html");
+      });
+      </script>
+
   </body>
 </html>
diff --git a/styles/global.css b/styles/global.css
@@ -28,40 +28,46 @@ html {
   }
 
   .mainbody {
-    border-color: aqua;
+    /*border-color: aqua;
     border-style: solid;
-    border-width: 3px;
+    border-width: 3px;*/
   }
 
-  .navbar {
-    width: 100%;
-    padding: 0;
-    margin: 0;
-    list-style-type: none;
-
-    border-color: rgb(255, 0, 0);
-    border-style: solid;
-    border-width: 3px;
+  .header {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr) auto;
   }
 
-  .navbaritem {
-    display: inline;
-    vertical-align: middle;
-
-    border-color: rgb(195, 0, 255);
-    border-style: solid;
-    border-width: 3px;
-    width: 15%;
+  .navbar {
+    display: grid;
+    grid-template-columns: auto auto;
   }
 
   .navbaritemtext {
     color: hsla(55, 16%, 84%, 0.247);
     font-family: RobotoMono-Bold;
     text-decoration: none;
-    font-size: 2.5vw;
+    font-size: 2rem;
+    transition: 0.3s;
+    margin-left: 25px;
+    margin-right: 25px;
+    margin-top: 10px;
+
+    /*border-color: rgb(195, 0, 255);
+    border-style: solid;
+    border-width: 3px;*/
+  }
+
+  .navbaritemtext:hover {
+    color: #DCDBCF;
   }
 
   .logo {
-    width: 30%;
+    width: 12rem;
     height: auto;
+    margin: 10px;
+
+    /*border-color: rgb(195, 0, 255);
+    border-style: solid;
+    border-width: 3px;*/
   }