Assingment 4

css/styles.css

@@ -1,54 +1,67 @@
 .row-header {
   margin: 0px auto;
-  padding: 0px 0px; }
+  padding: 0px 0px;
-
+}
 .row-content {
   margin: 0px auto;
   padding: 50px 0px;
   border-bottom: 1px ridge;
-  min-height: 400px; }
+  min-height: 400px;
-
+}
 .footer {
-  background-color: #D1C4E9;
+  background-color: #d1c4e9;
   margin: 0px auto;
-  padding: 20px 0px; }
+  padding: 20px 0px;
-
+}
 .jumbotron {
   margin: 0px auto;
   padding: 70px 30px;
-  background: #9575CD;
+  background: #9575cd;
-  color: floralwhite; }
+  color: floralwhite;
-
+}
 address {
   font-size: 80%;
   margin: 0px;
-  color: #0f0f0f; }
+  color: #0f0f0f;
-
+}
 body {
   padding: 50px 0px 0px 0px;
-  z-index: 0; }
+  z-index: 0;
-
+}
 .navbar-dark {
-  background-color: #512DA8; }
+  background-color: #512da8;
-
+}
 .tab-content {
   border-left: 1px solid #ddd;
   border-right: 1px solid #ddd;
   border-bottom: 1px solid #ddd;
-  padding: 10px; }
+  padding: 10px;
-
+}
 .carousel {
-  background: #512DA8; }
+  background: #512da8;
+}
 .carousel .carousel-item {
-    height: 300px; }
+  height: 300px;
+}
 .carousel .carousel-item img {
   position: absolute;
   top: 0;
   left: 0;
-      min-height: 300px; }
+  min-height: 300px;
-
+}
 #carouselButton {
   right: 0px;
   position: absolute;
   bottom: 0px;
-  z-index: 1; }
+  z-index: 1;
+}
+.modal .modal-header {
+  background: #512da8;
+  color: floralwhite;
+}
+.modal .modal-body {
+  background: #d1c4e9;
+}
+.modal .close {
+  color: #d1c4e9;
+}

css/styles.less

@@ -1,7 +1,7 @@
 @lt-gray: #ddd;
-@background-dark: #512DA8;
+@background-dark: #512da8;
-@background-light: #9575CD;
+@background-light: #9575cd;
-@background-pale: #D1C4E9;
+@background-pale: #d1c4e9;
 
 // Height variables
 @carousel-item-height: 300px;
@@ -71,3 +71,15 @@ body{
   bottom: 0px;
   z-index: 1;
 }
+.modal {
+  .modal-header {
+    background: @background-dark;
+    color: floralwhite;
+  }
+  .modal-body {
+    background: @background-pale;
+  }
+  .close {
+  color : @background-pale;
+  }
+}

index.html

@@ -64,7 +64,7 @@
             </li>
           </ul>
           <span class="navbar-text">
-            <a data-toggle="modal" data-target="#loginModal">
+            <a data-toggle="modal" id="loginButton">
               <span class="fa fa-sign-in"></span> Login</a
             >
           </span>
@@ -234,11 +234,10 @@
           </div>
           <div class="col-8 col-sm-3 align-self-center">
             <a
+              id="reserveButton"
               role="button"
               class="btn btn-block btn-warning"
-              data-toggle="modal"
+              ><span style="color: #ffffa0">Reserve Table</span></a
-              data-target="#reservationModal"
-              >Reserve Table</a
             >
           </div>
         </div>
@@ -493,6 +492,12 @@
           $("#carouselButton").children("span").addClass("fa-pause");
         }
       });
+      $("#reserveButton").click(function () {
+        $("#reservationModal").modal("show");
+      });
+      $("#loginButton").click(function () {
+        $("#loginModal").modal("show");
+      });
     </script>
   </body>
 </html>