KeyArgo
/
csms-claims-and-neighbors
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Enhance site design with modern look and rockhounding theme

This commit is contained in:
Daniel LaForce 2024-08-02 16:11:19 -06:00
parent 0982b33d2b
commit 9ce48f97b5
1 changed files with 36 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
index.html
View File

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