Complete the Book now card

ImsirovicAjdin · Oct 12, 2019 · 17d25a8 · 17d25a8
1 parent 95e6848
commit 17d25a8
Showing 1 changed file with 27 additions and 12 deletions.
diff --git a/index.html b/index.html
@@ -19,6 +19,12 @@
                 padding-bottom: 7.5rem;
             }
         }
+        .br0, 
+        .gj-datepicker-bootstrap [role=right-icon] button,
+        .form-control { 
+            border-radius: 0 !important
+        }
+
     </style>
     <!-- jQuery first, then Popper.js, then Bootstrap JS -->
     <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>      
@@ -105,20 +111,29 @@
                 <div class="col-sm-5">
                 <div class="card">
                   <div class="card-body">
-                    <h1 class="h3">Book homes, hotels, and more on Airbnb</h1>
+                    <h1 class="h3 mb-3">Book homes, hotels, and more on Airbnb</h1>
                     <form>
                       <div class="form-group">
-                        <label for="locationInput">WHERE</label>
-                        <input type="email" class="form-control" id="locationInput" aria-describedby="locationInputHelp" placeholder="Anywhere">
-                        <small id="locationInputHelp" class="form-text text-muted sr-only">Please type in your desired destination.</small>
+                          <div class="row px-3">
+                            <label class="mb-0" for="locationInput mb-0 mt-5">WHERE</label>
+                            <input type="email" class="form-control w-100 br0" id="locationInput" aria-describedby="locationInputHelp" placeholder="Anywhere">
+                            <small id="locationInputHelp" class="form-text text-muted sr-only">Please type in your desired destination.</small>                          
+                          </div>
                       </div>
-                        Start Date: <input id="startDate" width="276" />
-                        End Date: <input id="endDate" width="276" />    
+                        <div class="row px-3">
+                            <div class="col-sm-6 px-0">
+                                Start Date: <input class="br0" id="startDate" />    
+                            </div>
+                            <div class="col-sm-6 px-0 br0">
+                                End Date: <input  class="br0" id="endDate" />        
+                            </div>
+                        </div>
+
 
-                      <div class="row">
-                        <div class="col-sm-6">
+                      <div class="row px-3">
+                        <div class="col-sm-6 px-0 br0">
                             <div class="form-group">
-                                <label for="exampleFormControlSelect1">ADULTS</label>
+                                <label class="mb-0" for="exampleFormControlSelect1">ADULTS</label>
                                 <select class="form-control" id="exampleFormControlSelect1">
                                   <option>1 adult</option>
                                   <option>2 adults</option>
@@ -140,10 +155,10 @@ <h1 class="h3">Book homes, hotels, and more on Airbnb</h1>
                             </div>
                         </div>
 
-                          <div class="col-sm-6">
+                          <div class="col-sm-6 px-0 br0">
                               <div class="form-group">
-                                <label for="exampleFormControlSelect1">CHILDREN</label>
-                                <select class="form-control" id="exampleFormControlSelect1">
+                                <label class="mb-0" for="exampleFormControlSelect2">CHILDREN</label>
+                                <select class="form-control" id="exampleFormControlSelect2">
                                   <option>0 children</option>
                                   <option>1 child</option>
                                   <option>2 children</option>