From 9ce48f97b5dc2d24ce8b20c3e12595eb6eb2fafb Mon Sep 17 00:00:00 2001
From: Daniel <daniel.laforce@gmail.com>
Date: Fri, 2 Aug 2024 16:11:19 -0600
Subject: [PATCH] Enhance site design with modern look and rockhounding theme

---
 index.html | 49 ++++++++++++++++++++++++++++++++++++-------------
 1 file changed, 36 insertions(+), 13 deletions(-)

diff --git a/index.html b/index.html
index 9a59e18..1009b20 100644
--- a/index.html
+++ b/index.html
@@ -4,38 +4,44 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>CSMS Claims and Neighbors</title>
+  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
   <style>
     body {
-      font-family: Arial, sans-serif;
+      font-family: 'Roboto', sans-serif;
       margin: 0;
       padding: 0;
       display: flex;
       flex-direction: column;
       align-items: center;
-      height: 100vh;
+      background-color: #f4f4f4;
+      color: #333;
     }
     .header {
       width: 100%;
       text-align: center;
       padding: 20px;
-      background-color: #f0f0f0;
+      background-color: #2c3e50;
+      color: white;
+      position: sticky;
+      top: 0;
+      z-index: 1000;
     }
     .map-container {
       width: 100%;
       display: flex;
-      flex-direction: column; /* Change to column for vertical stacking */
-      align-items: center; /* Center the iframes horizontally */
+      flex-direction: column;
+      align-items: center;
       flex: 1;
+      padding: 20px;
     }
     iframe {
-      flex: 1;
+      width: 80%;
+      height: 60vh;
       border: none;
-      height: 55vh; /* Increase height by 10% */
-      width: 800px; /* Set fixed width */
-      max-width: 100%; /* Ensure it doesn't overflow on smaller screens */
+      margin-bottom: 20px;
+      box-shadow: 0 4px 8px rgba(0,0,0,0.1);
     }
     .buttons {
-      width: 100%;
       text-align: center;
       margin: 20px 0;
     }
@@ -44,9 +50,23 @@
       margin: 0 10px;
       font-size: 16px;
       cursor: pointer;
+      background-color: #2980b9;
+      color: white;
+      border: none;
+      border-radius: 5px;
+      transition: background-color 0.3s ease;
+    }
+    .buttons button:hover {
+      background-color: #3498db;
+    }
+    .footer {
+      width: 100%;
+      background-color: #2c3e50;
+      color: white;
+      padding: 20px;
+      text-align: center;
     }
   </style>
-
   <script async src="https://www.googletagmanager.com/gtag/js?id=G-CC1B9CQ691"></script>
   <script>
     window.dataLayer = window.dataLayer || [];
@@ -60,12 +80,15 @@
     <h1>CSMS Claims and Neighbors</h1>
   </div>
   <div class="map-container">
-    <iframe src="https://www.google.com/maps/d/embed?mid=1CH09O8Gp7sQ6H2GdybFvRdLB-1vElVc&ehbc=2E312F" style="border:none; overflow-y: hidden; background-color:white;"></iframe>
-    <iframe src="https://www.gaiagps.com/public/VVXcZPvEfvAbvRWi5F0DQPNT/?embed=True" style="border:none; overflow-y: hidden; background-color:white;"></iframe>
+    <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>
   </div>
   <div class="buttons">
     <button onclick="window.open('https://rebrand.ly/csmsgoogle', '_blank')">View on Google Maps</button>
     <button onclick="window.open('https://rebrand.ly/csmsgaia', '_blank')">View on Gaia GPS</button>
   </div>
+  <div class="footer">
+    <p>&copy; 2024 CSMS Claims and Neighbors. All rights reserved.</p>
+  </div>
 </body>
 </html>