Jump to content

Travel Search bar

Recommended Posts

Hello Group, I am looking to add a travel search bar to my home page. Currently i have the search bar at the bottom of the https://www.charterworldwide.org/air-taxis-quick-trips     that way someone can help me edit it outside of the home page

Examples: https://www.expedia.com/

https://flyxo.com/

https://www.aircharterserviceusa.com/


I have tried to search countless YouTube videos and forums however, I am having trouble identifying the CSS for the Search bar and cant tell if i can only change the looks of the Search bar and not the functions. 

My goal is to create a inquire bar with 3 tabs (one way, Round trip, Multi Leg)
Inside each tab will have

"One way" (Departure airport, destination airport, Departure time, # of Passengers)

Round trip  (Departure airport, destination airport, Departure time, returning time, # of Passengers)

Round trip (Departure airport, destination airport, Departure airport, destination airport, Departure times, returning times, # of Passengers)


ChatGPT has created the following CSS however i am having trouble getting it onto my website 

.travel-search-bar { background-color: white; padding: 20px; border: 1px solid #ccc; border-radius: 5px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); display: flex; justify-content: center; align-items: center; } .tabs { list-style: none; display: flex; } .tabs li { margin-right: 20px; cursor: pointer; } .tabs li.active { font-weight: bold; } .search-form { display: flex; flex-wrap: wrap; } .form-group { flex: 1; margin: 10px; } .form-group label { display: block; margin-bottom: 5px; } input[type="text"], input[type="date"], input[type="time"], input[type="number"] { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 5px; } button { background-color: #007BFF; color: white; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; } button:hover { background-color: #0056b3; }

Can someone please help me understand if this even possible on Squarespace or if i need to transfer to WIX or Wordpress. If possible, Can you please provide me the exact CSS code i just need to copy and paste into the website? can Zelle $20 for the time.

 

 

Link to comment
  • Replies 1
  • Views 1.2k
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.