Merge pull request #16 from CodeLouisville/challenge_8_solution

Challenge 8 Solution

Author: Bumbolio

css/style.css

@@ -161,6 +161,21 @@ nav a:hover {
   margin: .5rem 0;
 }
 
+/****** History ******/
+#history {
+    background: #871719;
+    background-image: url(../img/louies-bg-making-red.jpg);
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: cover;
+    color: #F2F2F2;
+}
+
+#history img {
+  margin: 0 auto;
+  display: block;
+}
+
 /****** Food Menu ******/
 #foodmenu {
   display: flex;
@@ -185,6 +200,11 @@ nav a:hover {
     text-align: right;
 }
 
+/*****Map******/
+#map {
+  min-height: 50vh;
+}
+
 /*****Footer******/
 footer {
     background-color: #333333;

index.html

@@ -72,7 +72,20 @@ <h2>Join Louie's List today, and get a free slice!</h2>
     <!-- /Mail List -->
 
     <!-- History -->
-
+        <section id="history" class="history" name="history">
+            <div class="wrap">
+                <div class="row">
+                    <div class="col span_1_of_2">
+                        <h2>Louie's History</h2>
+                        <p>Louie’s was founded in 1929 by Italian immigrant Louie Bianchi. Louie’s was Originally established on Main Street, in the Heart of Louisville. After losing his lease on Main Street, Louie Bianchi dismantled his original coal fired brick oven and moved it to 271 Clay Street where he continued to run and grow his business and refine his pizza recipe to perfection.</p>
+                        <p>Bianchi ran his business until 1954 when he sold the pizzeria to the Romano Brothers. Augustine Romano bought the business from his brothers and he continued to own and operate Louie’s pizzeria until he passed away in 1984, passing his legacy on.</p>
+                    </div>
+                    <div class="col span_1_of_2 text-center">
+                        <img src="img/louie-photo.png" alt="Vintage picture of Louie standing in front of original store.">
+                    </div>
+                </div>
+            </div>
+        </section>
     <!-- /History -->
 
     <!-- Food Menu -->
@@ -87,7 +100,8 @@ <h2><span class="red">Louie's</span> Menu</h2>
     <!-- /Food Menu -->
 
     <!-- Map -->
-
+    <section id="map">
+    </section>
     <!-- /Map -->
 
     <!-- Footer -->
@@ -114,5 +128,8 @@ <h2><span class="red">Louie's</span> Menu</h2>
         integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
         crossorigin="anonymous"></script>
     <script src="js/app.js" type="text/javascript"></script>
+    <script async defer
+        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBStcLRroobeFiCGUd4Sa9xBLgnFj4MgKE&callback=initMap">
+    </script>
 </body>
 </html>

js/app.js

@@ -58,4 +58,17 @@ $('#email-submit').click(function(e){
 function isValidEmailAddress(emailAddress) {
     var pattern = /^([a-z\d!#$%&'*+\-\/=?^_`{|}~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+(\.[a-z\d!#$%&'*+\-\/=?^_`{|}~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+)*|"((([ \t]*\r\n)?[ \t]+)?([\x01-\x08\x0b\x0c\x0e-\x1f\x7f\x21\x23-\x5b\x5d-\x7e\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|\\[\x01-\x09\x0b\x0c\x0d-\x7f\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))*(([ \t]*\r\n)?[ \t]+)?")@(([a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|[a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF][a-z\d\-._~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]*[a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\.)+([a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|[a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF][a-z\d\-._~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]*[a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\.?$/i;
     return pattern.test(emailAddress);
-};
+};
+
+//Google Maps
+function initMap() {
+    var uluru = {lat: 38.2556925, lng: -85.7512827};
+    var map = new google.maps.Map(document.getElementById('map'), {
+        zoom: 15,
+        center: uluru
+    });
+    var marker = new google.maps.Marker({
+        position: uluru,
+        map: map
+    });
+}