Merge pull request #50 from icaras84/KBbranch1

Kirrosaki · web-flow · commit 0411e492e896 · 2025-06-03T23:53:10.000-07:00
Added Header to all pages, adjusted layout
diff --git a/blog.html b/blog.html
@@ -6,6 +6,8 @@
   <link rel="stylesheet" href="styles/main.css"/>
 </head>
 <body> 
+   <!-- Top Header Navigation -->
+    <header id="site-header"></header>
   <nav>
     <a href="index.html"> Back to Homepage</a>
   </nav>
@@ -21,5 +23,7 @@ <h2>Blog</h2>
     debugTestBlog(1); // or whatever number matches your file
   });
 </script>
+    <!--Loader Script for the Header -->
+  <script src="scripts/load-header.js" defer></script>
 </body>
 </html>
diff --git a/contact.html b/contact.html
@@ -6,6 +6,8 @@
   <link rel="stylesheet" href="styles/main.css"/>
 </head>
 <body>
+   <!-- Top Header Navigation -->
+    <header id="site-header"></header>
   <nav>
     <a href="index.html">← Back to Home</a>
   </nav>
@@ -31,5 +33,7 @@ <h2>Contact Us</h2>
       <button type="submit">Send</button>
     </form>
   </section>
+    <!--Loader Script for the Header -->
+  <script src="scripts/load-header.js" defer></script>
 </body>
 </html>
diff --git a/events.html b/events.html
@@ -6,6 +6,8 @@
   <link rel="stylesheet" href="styles/main.css"/>
 </head>
 <body> 
+   <!-- Top Header Navigation -->
+    <header id="site-header"></header>
   <nav>
     <a href="index.html"> back to homepage</a>
   </nav>
@@ -20,6 +22,7 @@ <h2>Events</h2>
     debugTestEventsPost(1); // or whatever file number exists
     });
   </script>
-
+  <!--Loader Script for the Header -->
+  <script src="scripts/load-header.js" defer></script>
 </body>
 </html>
diff --git a/falls.html b/falls.html
@@ -6,17 +6,19 @@
 <script src="scripts/myscripts.js"></script>
 </head>
 <body >
-
+   <!-- Top Header Navigation -->
+    <header id="site-header"></header>
+<nav>
+    <a href="index.html"> Back to Homepage</a>
+  </nav>
 <h1>The Sparkling Waters</h1>
 
 <img src = "images/waterfall.jpg" alt="Ranger Falls" onmouseover="showAlt(this)" onmouseout="hideAlt(this)">
 <figcaption>Take in the Scenery</figcaption>
 
 <p id="alttext" style="font-size:50px"> <p>
 
-<ul>
-<li><a href="index.html">Table of Contents</a></li>
-</ul>
-
+  <!--Loader Script for the Header -->
+  <script src="scripts/load-header.js" defer></script>
 </body>
 </html>
diff --git a/ferry.html b/ferry.html
@@ -6,17 +6,20 @@
 <script src="scripts/myscripts.js"></script>
 </head>
 <body>
+     <!-- Top Header Navigation -->
+    <header id="site-header"></header>
+<nav>
+    <a href="index.html"> Back to Homepage</a>
+  </nav>
 
 <h1>A Ferry Expedition</h1>
 
 <img src = "images/ferry.jpg" alt="ferry" onmouseover="showAlt(this)" onmouseout="hideAlt(this)">
 <figcaption>Underway</figcaption>
 
 <p id="alttext" style="font-size:50px"> <p>
-
-<ul>
-<li><a href="index.html">Table of Contents</a></li>
-</ul>
+  <!--Loader Script for the Header -->
+  <script src="scripts/load-header.js" defer></script>
 
 </body>
 </html>
diff --git a/forest.html b/forest.html
@@ -7,7 +7,11 @@
 
 </head>
 <body>
-
+   <!-- Top Header Navigation -->
+    <header id="site-header"></header>
+<nav>
+    <a href="index.html"> Back to Homepage</a>
+  </nav>
 <h1>Explore the Forest</h1>
 
 <img src = "images/forest.jpg" alt="Rampart Ridge" onmouseover="showAlt(this)" onmouseout="hideAlt(this)">
@@ -17,10 +21,9 @@ <h1>Explore the Forest</h1>
 <section id="forests near Seaattle">
   <h1>"Forests near Seattle"</h1>
   <ul id="Seattle forests"> </ul>
-<ul>
-<li><a href="index.html">Back to homepage</a></li>
-</ul>
 </section>
 
+    <!--Loader Script for the Header -->
+  <script src="scripts/load-header.js" defer></script>
 </body>
 </html>
diff --git a/lake.html b/lake.html
@@ -6,17 +6,18 @@
 <script src="scripts/myscripts.js"></script>
 </head>
 <body>
-
+   <!-- Top Header Navigation -->
+    <header id="site-header"></header>
+<nav>
+    <a href="index.html"> Back to Homepage</a>
+  </nav>
 <h1>Around the Water's Edge</h1>
 
 <img src = "images/lake.jpg" alt="Lake" onmouseover="showAlt(this)" onmouseout="hideAlt(this)">
 <figcaption>Don't fall In</figcaption>
 
 <p id="alttext" style="font-size:50px"> <p>
-
-<ul>
-<li><a href="index.html">Table of Contents</a></li>
-</ul>
-
+  <!--Loader Script for the Header -->
+  <script src="scripts/load-header.js" defer></script>
 </body>
 </html>
diff --git a/mountain.html b/mountain.html
@@ -6,17 +6,18 @@
 <script src="scripts/myscripts.js"></script>
 </head>
 <body>
-
+   <!-- Top Header Navigation -->
+    <header id="site-header"></header>
+<nav>
+    <a href="index.html"> Back to Homepage</a>
+  </nav>
 <h1>Climb the Mountain!</h1>
 
 <img src = "images/mountain.jpg" alt="Mount Rainier" onmouseover="showAlt(this)" onmouseout="hideAlt(this)">
 <figcaption>Rope Up!</figcaption>
 
 <p id="alttext" style="font-size:50px"> <p>
-
-<ul>
-<li><a href="index.html">Table of Contents</a></li>
-</ul>
-
+  <!--Loader Script for the Header -->
+  <script src="scripts/load-header.js" defer></script>
 </body>
 </html>
diff --git a/news.html b/news.html
@@ -6,9 +6,11 @@
     <link rel="stylesheet" href="styles/main.css"/>
 </head>
 <body>
-    <nav>
-        <a href="index.html">← Back to Home</a>
-    </nav>
+       <!-- Top Header Navigation -->
+    <header id="site-header"></header>
+<nav>
+    <a href="index.html"> Back to Homepage</a>
+  </nav>
     
     <section id="announcements">
         <h1>Announcements</h1>
@@ -27,6 +29,7 @@ <h1>News</h1>
     debugTestAnnouncements(2); // or 2, 3, etc., depending on your file
       });
     </script>
-
+  <!--Loader Script for the Header -->
+  <script src="scripts/load-header.js" defer></script>
 </body>
 </html>
diff --git a/park.html b/park.html
@@ -6,17 +6,19 @@
 <script src="scripts/myscripts.js"></script>
 </head>
 <body>
-
+   <!-- Top Header Navigation -->
+    <header id="site-header"></header>
+<nav>
+    <a href="index.html"> Back to Homepage</a>
+</nav>
 <h1>Retreat in the Park</h1>
 
 <img src = "images/park.jpg" alt="Park" onmouseover="showAlt(this)" onmouseout="hideAlt(this)">
 <figcaption>Read Up</figcaption>
 
 <p id="alttext" style="font-size:50px"> <p>
 
-<ul>
-<li><a href="index.html">Table of Contents</a></li>
-</ul>
-
+  <!--Loader Script for the Header -->
+  <script src="scripts/load-header.js" defer></script>
 </body>
 </html>
