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; }
+.carousel .carousel-item {
-    .carousel .carousel-item img {
+  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,44 +1,44 @@
 @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;
 .zero-margin (@pad-up-dn: 0px, @pad-left-right: 0px) {
-	margin:0px auto;
+  margin: 0px auto;
   padding: @pad-up-dn @pad-left-right;
 }
-.row-header{
+.row-header {
   .zero-margin();
 }
 
 .row-content {
   .zero-margin(50px,0px);
   border-bottom: 1px ridge;
-    min-height:400px;
+  min-height: 400px;
 }
 
-.footer{
+.footer {
   background-color: @background-pale;
   .zero-margin(20px, 0px);
 }
 
 .jumbotron {
   .zero-margin(70px,30px);
-    background: @background-light ;
+  background: @background-light;
-    color:floralwhite;
+  color: floralwhite;
 }
 
-address{
+address {
-    font-size:80%;
+  font-size: 80%;
-    margin:0px;
+  margin: 0px;
-    color:#0f0f0f;
+  color: #0f0f0f;
 }
 
-body{
+body {
-    padding:50px 0px 0px 0px;
+  padding: 50px 0px 0px 0px;
-    z-index:0;
+  z-index: 0;
 }
 
 .navbar-dark {
@@ -52,7 +52,7 @@ body{
   padding: 10px;
 }
 .carousel {
-    background:@background-dark;
+  background: @background-dark;
 
   .carousel-item {
     height: @carousel-item-height;
@@ -66,8 +66,20 @@ body{
 }
 
 #carouselButton {
-    right:0px;
+  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"
+              ><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>