Skip to content

Commit 29fd820

Browse files
cmurchiscmurchis
committed
'updating imges and making responsive'
1 parent d831ed9 commit 29fd820

9 files changed

+275
-52
lines changed

‎img/Mission.png

7.76 MB
Loading

‎img/blackLogo.png

23.9 KB
Loading

‎img/grow.png

8.4 KB
Loading

‎img/growLogo.png

-23 KB
Binary file not shown.

‎img/rv.mp4

-3.18 MB
Binary file not shown.

‎img/video.mp4

2.73 MB
Binary file not shown.

‎index.html

+48-15
Original file line numberDiff line numberDiff line change
@@ -7,27 +7,60 @@
77
<link rel="stylesheet" href="style.css">
88
</head>
99
<body>
10+
<header >
11+
<nav>
12+
<!-- Video -->
13+
<video class="video-background" autoplay muted loop>
14+
<source src="img/video.mp4" type="video/mp4" />
15+
</video>
16+
17+
<div class="video-overlay">
18+
<div id="wrap">
19+
<img id="logo " src="img/blackLogo.png">
20+
<h1 id="title">Guided Reentry<br> On Wheels</h1>
21+
</div>
22+
<ul class="nav-menu"></ul>
23+
1024

11-
<header>
12-
13-
<!-- Video from coverr.co -->
14-
<video class="video-bg" autoplay muted loop>
15-
<source src="img/bg.mp4" class="vid" type="video/mp4" />
16-
</video>
17-
18-
<div class="video-overlay">
19-
<h1 id="headline"> <img id="logo" src="img/whiteLogo.png">Guided Reentry On Wheels</h1>
20-
</div>
21-
25+
<li class="nav-item">
26+
<a href="#" class="nav-link">Services</a>
27+
</li>
28+
<li class="nav-item">
29+
<a href="#" class="nav-link">Blog</a>
30+
</li>
31+
<li class="nav-item">
32+
<a href="#" class="nav-link">About</a>
33+
</li>
34+
<li class="nav-item">
35+
<a href="#" class="nav-link">Contact</a>
36+
</li>
37+
</ul>
38+
<div class="hamburger">
39+
<span class="bar"></span>
40+
<span class="bar"></span>
41+
<span class="bar"></span>
42+
</div>
43+
</div>
44+
45+
</nav>
2246
</header>
47+
<div id="mission">
48+
<img src="img/Mission.png" alt="mission and vision">
49+
</div>
2350

51+
<center>
52+
<h1 id="host">Are you a homoeowner/business operator/land owner willing to host a site?</h1>
53+
<p>Drop a pin on or near the site location.</p>
2454
<div id="map">
55+
2556
<iframe src="https://storage.googleapis.com/maps-solutions-ydsy4stc7z/address-selection/0u8d/address-selection.html"
26-
width="100%" height="100%"
27-
style="border:0;"
28-
loading="lazy">
57+
58+
style="border:0;"
59+
loading="lazy"
60+
id="frame">
2961
</iframe>
30-
</div>
62+
</div> </center>
63+
<script src="map.js" type="text/javascript"></script>
3164
</body>
3265

3366
</html>

‎map.js

+64-10
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,69 @@ function initMap() {
44
zoom: 17,
55
mapId: 'DEMO_MAP_ID',
66
});
7+
8+
}
9+
10+
const hamburger = document.querySelector(".hamburger");
11+
const navMenu = document.querySelector(".nav-menu");
12+
const navLink = document.querySelectorAll(".nav-link");
713

8-
const marker = new google.maps.marker.AdvancedMarkerElement({
9-
map,
10-
position: {lat: 37.4239163, lng: -122.0947209},
11-
});
14+
hamburger.addEventListener("click", mobileMenu);
15+
navLink.forEach(n => n.addEventListener("click", closeMenu));
1216

13-
marker.addListener('click', ({domEvent, latLng}) => {
14-
const {target} = domEvent;
15-
// Handle the click event.
16-
// ...
17-
});
18-
}
17+
function mobileMenu() {
18+
hamburger.classList.toggle("active");
19+
navMenu.classList.toggle("active");
20+
}
21+
22+
function closeMenu() {
23+
hamburger.classList.remove("active");
24+
navMenu.classList.remove("active");
25+
}
26+
27+
// A marker with a with a URL pointing to a PNG.
28+
const mapMarkerImg = document.createElement("img");
29+
30+
mapMarkerImg.src =
31+
"img/grow.png";
32+
33+
34+
35+
const mapMarkerView = new mapMarkerElement({
36+
map,
37+
center: {lat: 38.8375, lng: -120.8958 },
38+
zoom: 17,
39+
content: mapMarkerImg,
40+
title: "A marker using a custom PNG Image",
41+
});
42+
43+
const labels = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
44+
let labelIndex = 0;
45+
46+
function initMap() {
47+
const sacramento = {lat: 38.8375, lng: -120.8958 };
48+
const map = new google.maps.Map(document.getElementById("map"), {
49+
zoom: 12,
50+
center: bangalore,
51+
});
52+
53+
// This event listener calls addMarker() when the map is clicked.
54+
google.maps.event.addListener(map, "click", (event) => {
55+
addMarker(event.latLng, map);
56+
});
57+
// Add a marker at the center of the map.
58+
addMarker(sacramento, map);
59+
}
60+
61+
// Adds a marker to the map.
62+
function addMarker(location, map) {
63+
// Add the marker at the clicked location, and add the next-available label
64+
// from the array of alphabetical characters.
65+
new google.maps.Marker({
66+
position: location,
67+
label: labels[labelIndex++ % labels.length],
68+
map: map,
69+
});
70+
}
71+
72+
window.initMap = initMap;

0 commit comments

Comments
 (0)