finished working on the contact section

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 {

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;
 
 })()

index.html

@@ -8,6 +8,7 @@
   <link rel="stylesheet" href="vendor/normalize.css">
   <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
     integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
+  <script src="https://kit.fontawesome.com/3ea00495fc.js" crossorigin="anonymous"></script>
   <link rel="stylesheet" href="build/main.css">
 </head>
 
@@ -214,13 +215,32 @@ <h5 class="post__title">Post 2 Headline</h5>
     <h2 class="contact__title">Contact</h2>
     <div class="contact__container">
       <div class="contact__info">
-        <a></a>
-        <a></a>
-        <a></a>
+        <!-- contact details starts here -->
+        <div class="contact__phone">
+          <span class="contact__icons"><i class="fa-solid fa-phone"></i> Phone</span>
+          <br>
+          <a href="tel:+1(619) 693-6169">(619) 693-6169</a>
+        </div>
+        <div class="contact__address">
+          <span class="contact__icons"><i class="fa-solid fa-location-dot"></i> Studio</span>
+          <br>
+          <span>
+            <nobr>2970 Fifth Ave Suite 320,</nobr><br>
+            <nobr>San Diego, CA 92103</nobr>
+          </span>
+        </div>
+        <div class="contact__email">
+          <span class="contact__icons"><i class="fa-solid fa-envelope"></i> Email</span>
+          <br>
+          <a href="mailto:[email protected]">[email protected]</a>
+        </div>
       </div>
-      <div class="contact__map">
-
+      <!-- contact details end here -->
+      <!-- Map starts here -->
+      <div id="map" class="contact__map">
+        <!-- Map goes here -->
       </div>
+      <!-- Map ends here -->
     </div>
   </section>
   <!-- End of Contact Section -->
@@ -231,6 +251,9 @@ <h2 class="contact__title">Contact</h2>
   <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
     integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
     crossorigin="anonymous"></script>
+  <!-- Map Script -->
+  <script src="./vendor/maps.js"></script>
+  <!-- End of Map Script -->
   <script src="./build/main.js"></script>
 </body>