diff --git a/build/main.css b/build/main.css index bd8c829..cdd9cee 100644 --- a/build/main.css +++ b/build/main.css @@ -761,6 +761,90 @@ p { /* ============***End of Blog styles***============ */ +/* ============***Beginning of Contact Section styles***============ */ +.contact { + color: var(--light-text-color); + padding-bottom: var(--padding-60); +} + +.contact .contact__container { + display: grid; + place-content: center; + grid-template-columns: repeat(2, 50%); + font-size: 1.2rem; + justify-items: center; + +} + +@media screen and (max-width: 700px) { + .contact .contact__container { + grid-template-columns: 100%; + grid-template-rows: 1fr 1fr; + grid-row-gap: 30px; + } + } + +.contact__phone, .contact__address, .contact__email { + padding: var(--padding-35) 0; +} + +.contact__icons { + display: inline-block; + font-size: 1.3rem; + text-transform: uppercase; + margin: 10px 0; +} + +.contact__icons i{ + font-size: 1.8rem; + color: var(--secondary-color); + border: 1px solid var(--secondary-color); + padding: 10px; + height: 50px; + width: 50px; + text-align: center; + border-radius: 50%; +} + +#map { + height: 100%; + width: 100%; +} + +/* removes blue border from map */ +.gm-style iframe + div { border:none!important; } + +/* HTML marker styles */ +.price-tag { + background-color: #293946; + border-radius: 8px; + color: var(--primary-color); + font-size: .9rem; + padding: 10px 15px; + text-transform: uppercase; + position: relative; + } + + .price-tag::after { + content: ""; + position: absolute; + left: 50%; + top: 100%; + transform: translate(-50%, 0); + width: 0; + height: 0; + border-left: 8px solid transparent; + border-right: 8px solid transparent; + border-top: 8px solid #293946; + } + +@media screen and (min-width: 1300px) { + #map { + height: 100%; + width: 130%; + } + } +/* ============***End of Contact styles***============ */ /* Key Frames Animations */ @keyframes logo-animation { to { diff --git a/build/main.js b/build/main.js index 94f0da9..5e9edf6 100644 --- a/build/main.js +++ b/build/main.js @@ -5,6 +5,7 @@ const closeNav = document.querySelector("[data-closeNav]"); const navContainer = document.querySelector("[data-navContainer]"); const navItemsContainer = document.querySelector("[data-navItemsContainer]"); + let map; // set nav container width to 100% function openNavigation() { @@ -21,5 +22,53 @@ // Attatched eventlisteners openNav.addEventListener("click", openNavigation); closeNav.addEventListener("click", closeNavigation); + + // Initialize Google Maps + // Initialize and add the map +async function initMap() { + // The location of Uluru + const position = { lat: 32.736423619825, lng: -117.16049728303148 }; + // Request needed libraries. + //@ts-ignore + const { Map } = await google.maps.importLibrary("maps"); + const { AdvancedMarkerElement } = await google.maps.importLibrary("marker"); + + // The map, centered at Uluru + map = new Map(document.getElementById("map"), { + zoom: 18, + center: position, + mapId: "578717aaf820052d", + }); + + // create marker + const priceTag = document.createElement("div"); + + priceTag.className = "price-tag"; + priceTag.textContent = "Pilates Journeys"; + + // The marker, positioned at Pilates Journeys + const marker = new AdvancedMarkerElement({ + map: map, + position: position, + content: priceTag, + title: "Pilates Journeys", + }); +} + +initMap(); + + + // function initMap() { + // map = new google.maps.Map(document.getElementById("map"), { + // center: { lat: 32.736423619825, lng: -117.16049728303148 }, + // zoom: 14, + // }); + + // const marker = new google.maps.marker.AdvancedMarkerElement({ + // map, + // position: {lat: 32.736423619825, lng: -117.16049728303148}, + // }); + // } + // window.initMap = initMap; })() \ No newline at end of file diff --git a/index.html b/index.html index c5016ea..2498b45 100644 --- a/index.html +++ b/index.html @@ -8,6 +8,7 @@ + @@ -214,13 +215,32 @@
Post 2 Headline

Contact

- - - + +
+ Phone +
+ (619) 693-6169 +
+
+ Studio +
+ + 2970 Fifth Ave Suite 320,
+ San Diego, CA 92103 + +
+
-
- + + +
+
+
@@ -231,6 +251,9 @@

Contact

+ + + diff --git a/vendor/maps.js b/vendor/maps.js new file mode 100644 index 0000000..fced511 --- /dev/null +++ b/vendor/maps.js @@ -0,0 +1,7 @@ +"use strict"; +(g => { var h, a, k, p = "The Google Maps JavaScript API", c = "google", l = "importLibrary", q = "__ib__", m = document, b = window; b = b[c] || (b[c] = {}); var d = b.maps || (b.maps = {}), r = new Set, e = new URLSearchParams, u = () => h || (h = new Promise(async (f, n) => { await (a = m.createElement("script")); e.set("libraries", [...r] + ""); for (k in g) e.set(k.replace(/[A-Z]/g, t => "_" + t[0].toLowerCase()), g[k]); e.set("callback", c + ".maps." + q); a.src = `https://maps.${c}apis.com/maps/api/js?` + e; d[q] = f; a.onerror = () => h = n(Error(p + " could not load.")); a.nonce = m.querySelector("script[nonce]")?.nonce || ""; m.head.append(a) })); d[l] ? console.warn(p + " only loads once. Ignoring:", g) : d[l] = (f, ...n) => r.add(f) && u().then(() => d[l](f, ...n)) })({ + key: "AIzaSyChehKwEK5YM_enKaCyPgOlZNf98_KHxOI", + v: "weekly", + // Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.). + // Add other bootstrap parameters as needed, using camel case. + }); \ No newline at end of file