Hero V12

Author: Colorlib

Released: September 2026

License: CC BY 3.0

A split hero for a holiday-rental site, with the headline, intro and three proof points on the left and a large alpine lake photo on the right. A white search bar for location, check-in, check-out and guests overlaps the bottom of the photo and uses native text, date and select inputs with visible labels. Script prefills sensible dates, keeps check-out at least one night after check-in, validates with the browser and reports the search in a status region.

It is plain HTML and CSS plus a few lines of vanilla JavaScript: no jQuery, no Bootstrap files, no plugins, and the download is 364 KB. Use it on its own, or drop it into a Bootstrap 4, 5 or 6 project and it looks the same.

• Native date inputs with a check-out minimum that follows check-in
• Location field with datalist suggestions
• Search bar that overlaps the photo and regroups into a two-column card on phones
• Visible labels and focus-within field highlighting
• Result summary announced through role="status"