Update site design and add legend for CSMS claims

index.html

@@ -10,9 +10,6 @@
       font-family: 'Roboto', sans-serif;
       margin: 0;
       padding: 0;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
       background-color: #f4f4f4;
       color: #333;
     }
@@ -26,6 +23,22 @@
       top: 0;
       z-index: 1000;
     }
+    .navbar {
+      display: flex;
+      justify-content: center;
+      background-color: #2c3e50;
+      padding: 10px 0;
+    }
+    .navbar a {
+      color: white;
+      padding: 14px 20px;
+      text-decoration: none;
+      text-align: center;
+    }
+    .navbar a:hover {
+      background-color: #2980b9;
+      border-radius: 5px;
+    }
     .map-container {
       width: 100%;
       display: flex;
@@ -33,26 +46,22 @@
       align-items: center;
       flex: 1;
       padding: 20px;
-      position: relative;
     }
     iframe {
-      width: 960px; /* 800px + 20% */
-      height: 660px; /* 550px + 20% */
+      width: 960px;
+      height: 660px;
       border: none;
       margin-bottom: 20px;
       box-shadow: 0 4px 8px rgba(0,0,0,0.1);
     }
     .legend {
-      width: 200px;
+      width: 960px;
       margin-bottom: 20px;
       text-align: left;
       padding: 10px;
       background-color: #fff;
       border: 1px solid #ccc;
       box-shadow: 0 4px 8px rgba(0,0,0,0.1);
-      position: absolute;
-      top: 20px;
-      right: 20px;
     }
     .legend h3 {
       margin-top: 0;
@@ -71,7 +80,7 @@
       margin-right: 10px;
     }
     .color-green {
-      background-color: #00ff00; /* Adjust the color to match your map */
+      background-color: #00ff00;
     }
     .buttons {
       text-align: center;
@@ -117,6 +126,12 @@
   <div class="header">
     <h1>CSMS Claims and Neighbors</h1>
   </div>
+  <div class="navbar">
+    <a href="#home">Home</a>
+    <a href="#claims">Claims</a>
+    <a href="#events">Events</a>
+    <a href="#contact">Contact</a>
+  </div>
   <div class="map-container">
     <iframe src="https://www.google.com/maps/d/embed?mid=1CH09O8Gp7sQ6H2GdybFvRdLB-1vElVc&ehbc=2E312F"></iframe>
     <iframe src="https://www.gaiagps.com/public/VVXcZPvEfvAbvRWi5F0DQPNT/?embed=True"></iframe>