diff --git a/public/css/search.css b/public/css/search.css index 59c7918619334758ed362d98396248aa88a59c54..c6da220f3f92a985d2e2f9f5034f4de0767483df 100644 --- a/public/css/search.css +++ b/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 diff --git a/views/index.ejs b/views/index.ejs index 0631eb79c6cbe3233ce99c20d3a50506ee49115f..94bfbee9692556a5667dc17ce6142c9fdca6ac0c 100644 --- a/views/index.ejs +++ b/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>