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;
-  color: floralwhite; }
-
+  background: #9575cd;
+  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; }
-  .carousel .carousel-item {
-    height: 300px; }
-    .carousel .carousel-item img {
-      position: absolute;
-      top: 0;
-      left: 0;
-      min-height: 300px; }
-
+  background: #512da8;
+}
+.carousel .carousel-item {
+  height: 300px;
+}
+.carousel .carousel-item img {
+  position: absolute;
+  top: 0;
+  left: 0;
+  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,73 +1,85 @@
 @lt-gray: #ddd;
-@background-dark: #512DA8;
-@background-light: #9575CD;
-@background-pale: #D1C4E9;
+@background-dark: #512da8;
+@background-light: #9575cd;
+@background-pale: #d1c4e9;
 
 // Height variables
 @carousel-item-height: 300px;
 .zero-margin (@pad-up-dn: 0px, @pad-left-right: 0px) {
-	margin:0px auto;
-	padding: @pad-up-dn @pad-left-right;
+  margin: 0px auto;
+  padding: @pad-up-dn @pad-left-right;
 }
-.row-header{
-    .zero-margin();
+.row-header {
+  .zero-margin();
 }
 
 .row-content {
-    .zero-margin(50px,0px);
-    border-bottom: 1px ridge;
-    min-height:400px;
+  .zero-margin(50px,0px);
+  border-bottom: 1px ridge;
+  min-height: 400px;
 }
 
-.footer{
-    background-color: @background-pale;
-    .zero-margin(20px, 0px);
+.footer {
+  background-color: @background-pale;
+  .zero-margin(20px, 0px);
 }
 
 .jumbotron {
-    .zero-margin(70px,30px);
-    background: @background-light ;
-    color:floralwhite;
+  .zero-margin(70px,30px);
+  background: @background-light;
+  color: floralwhite;
 }
 
-address{
-    font-size:80%;
-    margin:0px;
-    color:#0f0f0f;
+address {
+  font-size: 80%;
+  margin: 0px;
+  color: #0f0f0f;
 }
 
-body{
-    padding:50px 0px 0px 0px;
-    z-index:0;
+body {
+  padding: 50px 0px 0px 0px;
+  z-index: 0;
 }
 
 .navbar-dark {
-     background-color: @background-dark;
+  background-color: @background-dark;
 }
 
 .tab-content {
-    border-left: 1px solid @lt-gray;
-    border-right: 1px solid @lt-gray;
-    border-bottom: 1px solid @lt-gray;
-    padding: 10px;
+  border-left: 1px solid @lt-gray;
+  border-right: 1px solid @lt-gray;
+  border-bottom: 1px solid @lt-gray;
+  padding: 10px;
 }
 .carousel {
-    background:@background-dark;
+  background: @background-dark;
 
-    .carousel-item {
-        height: @carousel-item-height;
-        img {
-            position: absolute;
-            top: 0;
-            left: 0;
-            min-height: 300px;
-        }
+  .carousel-item {
+    height: @carousel-item-height;
+    img {
+      position: absolute;
+      top: 0;
+      left: 0;
+      min-height: 300px;
     }
+  }
 }
 
 #carouselButton {
-    right:0px;
-    position: absolute;
-    bottom: 0px;
-    z-index: 1;
-}
+  right: 0px;
+  position: absolute;
+  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"
-              data-target="#reservationModal"
-              >Reserve Table</a
+              ><span style="color: #ffffa0">Reserve Table</span></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>