Merge pull request #60 from icaras84/KBbranch1

Kirrosaki · web-flow · commit 9a71449fdaee · 2025-06-11T19:55:35.000-07:00
K bbranch1
diff --git a/blog.html b/blog.html
@@ -9,9 +9,6 @@
 <body> 
    <!-- Top Header Navigation -->
     <header id="site-header"></header>
-  <nav>
-    <a href="index.html"> Back to Homepage</a>
-  </nav>
   <section id="blog">
     <h2>Blog</h2>
     <ul id="blog-feed"></ul>
diff --git a/contact.html b/contact.html
@@ -9,9 +9,6 @@
 <body>
    <!-- Top Header Navigation -->
     <header id="site-header"></header>
-  <nav>
-    <a href="index.html">← Back to Home</a>
-  </nav>
 
   <section id="contact">
     <h2>Contact Us</h2>
diff --git a/events.html b/events.html
@@ -9,11 +9,16 @@
 <body> 
    <!-- Top Header Navigation -->
     <header id="site-header"></header>
-  <nav>
-    <a href="index.html"> back to homepage</a>
-  </nav>
+  
   <section id="events">
     <h2>Events</h2>
+
+    <figure class="event-image">
+    <img src="images/1930's style poster celebrating SeaFair events and celebrations around the Pudget Sound area.png" 
+         alt="1930s-style SeaFair poster">
+    <figcaption>1930s-style SeaFair poster celebrating Puget Sound events</figcaption>
+  </figure>
+
     <ul id="events-feed"></ul>
   </section>
 
diff --git a/falls.html b/falls.html
@@ -9,9 +9,7 @@
 <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)">
diff --git a/ferry.html b/ferry.html
@@ -9,9 +9,7 @@
 <body>
      <!-- Top Header Navigation -->
     <header id="site-header"></header>
-<nav>
-    <a href="index.html"> Back to Homepage</a>
-  </nav>
+
 
 <h1>A Ferry Expedition</h1>
 
diff --git a/forest.html b/forest.html
@@ -10,9 +10,7 @@
 <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)">
diff --git a/hiking.html b/hiking.html
@@ -12,12 +12,14 @@
 
     <!-- Hiking Section -->
     <section id="hiking">
-        <h2>
-            Hikes Trails
-          </h2>
-        <ul id="hiking-feed">
-
-        </ul>
+        <h2>Hikes Trails </h2>
+        
+          <figure class="map-image">
+            <img src="images/seattle-trails-map.png" alt="Stylized 1930s map showing hiking trails around Seattle">
+            <figcaption>A stylized 1930s map of hiking trails around Seattle</figcaption>
+        </figure>
+        
+        <ul id="hiking-feed"></ul>
     </section>
 
     <!--Loader Script for the Header -->
diff --git a/images/Blog Updates.png b/images/Blog Updates.png
diff --git a/images/News and Annoucement.png b/images/News and Annoucement.png
diff --git a/images/Upcoming Events.png b/images/Upcoming Events.png
diff --git a/images/seattle-trails-map.png b/images/seattle-trails-map.png
diff --git a/index.html b/index.html
@@ -11,10 +11,12 @@
     <header id="site-header"></header>
 
   <section id="announcement">
+          
         <h2>
-             News and Announcementa
+             News and Announcements
             <a href="news.html">[View All]</a>
         </h2>
+      <img src="images/News and Annoucement.png" alt="News and Announcements Header" class="section-banner">
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ut ultricies sem.</p>
     </section>
 
@@ -24,6 +26,7 @@ <h2>
             Blog Highlights 
             <a href="blog.html">[View All]</a>
         </h2>
+         <img src="images/Blog Updates.png" alt="Blog Updates Header" class="section-banner">
         <ul>
             <li>
                 <a href="blog.html#0/">Lorem Ipsum Dolor Sit Amet</a> - Brief description here.
@@ -40,6 +43,7 @@ <h2>
             Upcoming Events 
             <a href="events.html">[View All]</a>
         </h2>
+         <img src="images/Upcoming Events.png" alt="Upcoming Events Header" class="section-banner">
         <ul>
             <li>
                 <strong>Event Title 1</strong> - Lorem ipsum dolor sit amet. <em>Date: 2025-06-01</em>
diff --git a/lake.html b/lake.html
@@ -9,9 +9,7 @@
 <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)">
diff --git a/mountain.html b/mountain.html
@@ -9,9 +9,7 @@
 <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)">
diff --git a/news.html b/news.html
@@ -9,9 +9,6 @@
 <body>
        <!-- Top Header Navigation -->
     <header id="site-header"></header>
-<nav>
-    <a href="index.html"> Back to Homepage</a>
-  </nav>
     
     <section id="announcements">
         <h1>Announcements</h1>
diff --git a/park.html b/park.html
@@ -9,9 +9,7 @@
 <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)">
diff --git a/seattle-trails-map.png b/seattle-trails-map.png
@@ -0,0 +1 @@
+
diff --git a/styles/contact.css b/styles/contact.css
@@ -0,0 +1,50 @@
+#contact {
+  max-width: 600px;
+  margin: 3rem auto;
+  padding: 2rem;
+  background-color: #e8f0e8; /* soft green background */
+  border: 1px solid #a0a080;
+  border-radius: 8px;
+  box-shadow: 0 4px 10px rgba(75, 75, 63, 0.1);
+}
+
+#contact h2 {
+  text-align: center;
+  color: #5c6b49;
+  margin-bottom: 1.5rem;
+}
+
+#contact label {
+  display: block;
+  font-weight: bold;
+  margin-bottom: 0.25rem;
+  color: #4b4b3f;
+}
+
+#contact input,
+#contact textarea {
+  width: 100%;
+  padding: 0.5rem;
+  border: 1px solid #a0a080;
+  border-radius: 4px;
+  background-color: #f6f8f6;
+  color: #4b4b3f;
+  margin-bottom: 1.25rem;
+  font-size: 1rem;
+}
+
+#contact button {
+  background-color: #7a8b66;
+  color: #f6f8f6;
+  border: none;
+  padding: 0.75rem 1.5rem;
+  font-weight: bold;
+  border-radius: 4px;
+  cursor: pointer;
+  display: block;
+  margin: 0 auto;
+}
+
+#contact button:hover {
+  background-color: #5c6b49;
+}
diff --git a/styles/header.css b/styles/header.css
@@ -5,7 +5,7 @@
   align-items: center;
   flex-wrap: nowrap;
   padding: 1rem 2rem;
-  background-color: #e8f0e8; 
+  background-color:  #5c6b49;
   border-bottom: 4px solid #a0a080; 
   box-shadow: 0 4px 6px rgba(75, 75, 63, 0.1);
 }
@@ -20,14 +20,14 @@
 
 /* Style individual links */
 .nav-links a {
- text-decoration: none;
+ text-decoration: underline;
   color: #4b4b3f; 
   font-weight: bold;
   transition: color 0.2s ease;
 }
 
 .nav-links a:hover {
-  color: #7a8b66; 
+  color: #c94f1d; 
 }
 
 /* Search form styling */
diff --git a/styles/main.css b/styles/main.css
@@ -25,3 +25,64 @@ img {
   margin: 0 auto;
 }
 
+.map-image {
+  max-width: 800px;
+  margin: 2rem auto;
+  text-align: center;
+}
+
+.map-image img {
+  width: 100%;
+  height: auto;
+  border: 1px solid #a0a080;
+  border-radius: 6px;
+  box-shadow: 0 4px 10px rgba(75, 75, 63, 0.15);
+}
+
+.map-image figcaption {
+  font-size: 0.9rem;
+  color: #5c6b49;
+  margin-top: 0.5rem;
+}
+
+/* Section styling */
+section {
+  max-width: 800px;
+  margin: 3rem auto;
+  padding: 1.5rem;
+  background-color: #f6f8f6;
+  border: 1px solid #a0a080;
+  border-radius: 8px;
+  box-shadow: 0 4px 8px rgba(75, 75, 63, 0.05);
+}
+
+/* Header images for each section */
+.section-banner {
+  width: 1000px;
+  max-width: 100%;
+  height: auto;
+  display: block;
+  margin: 0 auto 1rem auto;
+  border-radius: 6px;
+  box-shadow: 0 2px 6px rgba(75, 75, 63, 0.1);
+}
+
+/* Headings */
+section h2 {
+  color: #5c6b49;
+  font-size: 1.75rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+section h2 a {
+  font-size: 0.9rem;
+  color: #4b4b3f;
+  text-decoration: underline;
+  margin-left: 1rem;
+}
+
+section h2 a:hover {
+  color: #315f7c;
+}
