checkbox & confirm buttons #13

FACG5 · Oct 4, 2018 · b8a4fbf · b8a4fbf
1 parent 7fad92d
commit b8a4fbf
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 3 deletions.
diff --git a/public/css/home.css b/public/css/home.css
@@ -3,17 +3,19 @@
   display: flex;
   flex-wrap: wrap;
   justify-content: flex-start;
+  margin-bottom: 20px;
+
+
 }
 
 .card {
   margin: 7px;
   border-radius: 10px;
   border: 2px solid #DCDCDC;
   position: relative;
+  margin-left: 30px;
 }
 
-
-
 .card:hover .overlay {
     position: absolute;
     width: 100%;
@@ -23,7 +25,7 @@
     right: 0;
     bottom: 0;
     background-color: rgba(0,0,0,0.5);
-    z-index:100;
+    z-index: 1;
     cursor: pointer;
     display: flex;
     align-items: center;
@@ -65,9 +67,52 @@ background-color: #787878;
   display: flex;
   justify-content: space-between;
 }
+.check-box {
+  z-index: 2;
+  width: 20px;
+  height: 20px;
+  margin-top: -3px;
+
+}
 .search-view h2 {
   padding: 20px;
   padding-left: 35px;
   font-family: 'Lato', sans-serif;
   font-size: 30px;
+  background-color: #DCDCDC;
+}
+
+.confirm-btns {
+  display: flex;
+  text-align: center;
+  margin: 30px;
+  justify-content: center;
+ }
+
+#confirm-book {
+  background-color: #00C2FF;
+  width: 420px;
+  height: 70px;
+  border: 0;
+  color: #FFFFFF;
+  font-family: 'Lato', sans-serif;
+  font-size: 30px;
+}
+
+#cancel-book {
+  background-color: #FF5454;
+  width: 420px;
+  height: 70px;
+  border: 0;
+  color: #FFFFFF;
+  font-family: 'Lato', sans-serif;
+  font-size: 30px;
+}
+
+#confirm-book:hover {
+  background-color: #194856;
+}
+
+#cancel-book:hover {
+  background-color: #b53636;
 }
diff --git a/src/views/home.hbs b/src/views/home.hbs
@@ -15,6 +15,7 @@
           <div class="info">
             <span>Price : {{price}}$</span>
             <span>Room No. : {{room_num}}</span>
+            <input type="checkbox" class="check-box" id="{{room_num}}">
           </div>
         </div>
       {{/each}}
@@ -37,6 +38,7 @@
           <div class="info">
             <span>Price : {{price}}$</span>
             <span>Room No. : {{room_num}}</span>
+            <input type="checkbox" class="check-box" id="{{room_num}}">
           </div>
         </div>
       {{/each}}
@@ -59,10 +61,15 @@
           <div class="info">
             <span>Price : {{price}}$</span>
             <span>Room No. : {{room_num}}</span>
+            <input type="checkbox" class="check-box" id="{{room_num}}">
           </div>
         </div>
       {{/each}}
     </div>
   </div>
   {{/if}}
+  <div class="confirm-btns">
+    <button id="confirm-book" type="button" name="button">Confirm</button>
+    <button id="cancel-book" type="button" name="button">Cancel</button>
+  </div>
 </section>