added a search bar to the page

Gemfile.lock

@@ -50,8 +50,6 @@ GEM
     bindex (0.7.0)
     bootsnap (1.4.4)
       msgpack (~> 1.0)
-    bootstrap-datepicker-rails (1.8.0.1)
-      railties (>= 3.0)
     builder (3.2.3)
     byebug (11.0.1)
     carrierwave (1.3.1)
@@ -225,7 +223,6 @@ PLATFORMS
 DEPENDENCIES
   autoprefixer-rails
   bootsnap
-  bootstrap-datepicker-rails
   carrierwave (~> 1.2)
   cloudinary (~> 1.9.1)
   devise

app/assets/stylesheets/components/_cards.scss

@@ -1,8 +1,9 @@
 .campsite-card {
   overflow: hidden;
   background: white;
-  box-shadow: 0 0 5px rgba(0,0,0,0.1);
+  box-shadow: 0 0 3px rgba(0,0,0,0.1);
   margin: 16px;
+  border-radius: 3px;
 }
 
 .campsite-card > img {
@@ -13,7 +14,7 @@
 
 .campsite-card h2 {
   font-size: 14px;
-  font-weight: bold;
+  font-weight: semi-bold;
   margin: 0;
 }
 

app/assets/stylesheets/components/_container.scss

@@ -2,7 +2,7 @@
 .main-container {
   background-color: #F4F4F4;
   border-radius: 10px;
-  margin: 50px auto;
+  margin: 20px auto;
   padding: 25px;
   width: 1250px;
   display: flex;

app/assets/stylesheets/components/_form.scss

@@ -73,4 +73,22 @@
   font-size: 15px;
 }
 
+// search bar on index page for campsites
+.search-bar-container {
+  width: 1000px;
+  margin: 40px auto 0px auto;
+  padding: 15px;
+  background-color: #fcfcfc;
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
+  grid-gap: 5px;
+  flex-grow: 1;
+  flex-wrap: nowrap;
+  border-radius: 4px;
+  // box-shadow: 0 0 3px rgba(0,0,0,0.1);
+}
 
+.search-bar-container .form-item {
+  margin: 0 5px;
+  height: 40px;
+}

app/views/campsites/index.html.erb

@@ -1,4 +1,5 @@
 <% render "partials/search_form" %>
+<!-- nav bar -->
 <div class="navbar border-bottom">
   <div>
     <%= link_to root_path do %>
@@ -7,25 +8,43 @@
   </div>
   <nav class="d-flex">
     <a href="/campsites/new">List your campsite</a>
-      <% if user_signed_in? %>
-   <div class="nav-item active">
-     <%= link_to "Log out", destroy_user_session_path, method: :delete, class: "navlink"  %>
+    <% if user_signed_in? %>
+    <div class="nav-item active">
      <%= link_to "Dashboard", dashboard_path(@user), class: "navlink"  %>
+     <%= link_to "Log out", destroy_user_session_path, method: :delete, class: "navlink"  %>
    </div>
-        <% else %>
-    <div class="nav-item active d-flex">
-      <a data-toggle="modal" data-target="#ModalSignin" href="">Sign in</a>
-      <%= render "partials/sign_in"%>
-    </div>
-    <div class="nav-item active">
-      <a data-toggle="modal" data-target="#ModalSignup" href="">Sign up</a>
-      <%= render "partials/modal_signup"%>
-    </div>
-        <% end %>
+   <% else %>
+   <div class="nav-item active d-flex">
+    <a data-toggle="modal" data-target="#ModalSignin" href="">Sign in</a>
+    <%= render "partials/sign_in"%>
+  </div>
+  <div class="nav-item active">
+    <a data-toggle="modal" data-target="#ModalSignup" href="">Sign up</a>
+    <%= render "partials/modal_signup"%>
+  </div>
+  <% end %>
+</nav>
+</div>
 
-  </nav>
+<!-- search bar  -->
+<div class="search-bar-container">
+  <input type="text" class="form-item form-control" placeholder="Place">
+  <input type="date" class="form-item form-control" placeholder="check in">
+  <input type="date" class="form-item form-control" placeholder="check out">
+  <select class="form-item form-control">
+    <option>1</option>
+    <option>2</option>
+    <option>3</option>
+    <option>4</option>
+    <option>5</option>
+    <option>6</option>
+    <option>7</option>
+    <option>8</option>
+  </select>
+  <%=link_to "search", campsites_path, :class => "btn btn-warning font-weight-bold"%>
 </div>
 
+<!-- search results -->
 <div class="main-container">
   <div class="campsite-container">
     <% @campsites.each do |campsite| %>
@@ -36,7 +55,7 @@
         <div>
           <h2><%= campsite.name %></h2>
         </div>
-        <h2 class="campsite-card-pricing">€<%= campsite.price %> p/n</h2>
+        <h2 class="campsite-card-pricing">€<%= campsite.price %></h2>
       </div>
     </div>
     <% end %>