Project Round 7

public/css/search.css

@@ -86,4 +86,42 @@ body {
   .button:hover {
     background-color: #005bb5;
   }
+  .search-container {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    max-width: 400px;
+    border: 2px solid #007BFF;
+    border-radius: 25px;
+    overflow: hidden;
+    background: white;
+  }
+  
+  .search-container input {
+    flex: 1;
+    padding: 10px 15px;
+    border: none;
+    outline: none;
+    font-size: 16px;
+  }
+  
+  .search-container button {
+    background-color: #007BFF;
+    color: white;
+    border: none;
+    padding: 10px 20px;
+    font-size: 16px;
+    cursor: pointer;
+    transition: background-color 0.3s ease, transform 0.2s ease;
+  }
+  
+  .search-container button:hover {
+    background-color: #0056b3;
+    transform: scale(1.05);
+  }
+  
+  .search-container button:active {
+    background-color: #004494;
+    transform: scale(0.98);
+  }
   
\ No newline at end of file

views/index.ejs

@@ -14,7 +14,7 @@
       <% if (session.userId) { %>
         <a href="/create" class="btn-create">Create Tour</a>
       <% } %>
-      <form action="/search" method="GET">
+      <form action="/search" method="GET" class="search-container">
         <input type="text" name="query" placeholder="Search for tours..." required>
         <button type="submit">Search</button>
       </form>