Wander
A warm, structured HTML5 template for tour operators and travel agencies.
About this theme
Wander is a full website template for tour operators and travel agencies. It includes a photography-led hero with a live-departure badge, trip-type-tabbed destinations (Safari & Wildlife, Beach & Coast — real interactive tabs) with real destination photography and pricing, a local-guide team section with real portrait photography, traveler testimonials, a working trip-planning request form, an FAQ accordion, and a footer. Built with plain HTML, CSS and vanilla JavaScript — no build step, no framework dependency. Fully responsive with a persisted dark-mode toggle and scroll-reveal animations. One brand color (sunset orange), sharp corners, numbered indices instead of icons, Playfair Display serif paired with Work Sans — restyles cleanly to match your own agency's brand by editing a handful of CSS custom properties.
Platform compatibility
| Edition | Responsive | RTL | Translation-ready | Dark mode | Version |
|---|---|---|---|---|---|
| HTML5 (Vanilla CSS/JS) | ✓ | — | — | ✓ | 1.0.0 |
Documentation
Getting started
1. Unzip the downloaded package. 2. Open `index.html` directly in a browser to preview it, or upload the whole folder to your web host. 3. All styling lives in `assets/css/styles.css` — the brand color, borders and spacing are controlled by the CSS custom properties (variables) at the top of the file. Change `--c-primary` to restyle the whole site to your brand. 4. All interactivity — the mobile menu, dark mode toggle, destination tabs, FAQ accordion and trip-planning form — lives in `assets/js/main.js`, plain vanilla JavaScript with no dependencies or build step. 5. Replace the placeholder guide photos, agency name and copy in `index.html` with your own content. Photos live in `assets/img/`. 6. The trip-planning request form is UI-only by default — wire the form submission up to your own backend or a booking service to receive real requests.
Editing the destination tabs
The Destinations section's two tabs are plain markup, not a component: each button in `.dest-tabs` carries a `data-dest` attribute matching a `.dest-panel`'s `data-panel` attribute, and `main.js` just toggles an `is-active` class on click — add, remove or rename a trip type by editing both the button and its matching panel, no JavaScript changes required. Each destination card is a `.dest-card` with a `.dest-media` image, a price tag, and a body — copy an existing card to add a new destination. The photography (hero image, destination shots and guide portraits) is free-to-use stock photography sourced from Pexels — swap the files in `assets/img/` for your own trip photography and real guide portraits before going live.
Reviews
No reviews yet — be the first to share your experience.
Related themes
