Tourin - Tourism and Travel Agency Booking HTML Template preview 1

Tourin - Tourism and Travel Agency Booking HTML Template

bookmark

Tourin is a Bootstrap-based HTML template for travel agencies, suitable for travel company websites, itinerary displays, online booking, and more. The template includes homepage variants, destination lists, attraction details, blog, shop...

HTML

Project Overview

Tourin is a Bootstrap-based HTML template for travel agencies, suitable for travel company websites, itinerary displays, online booking, and more. The template includes homepage variants, destination lists, attraction details, blog, shopping cart and checkout pages, along with built-in contact form support (PHPMailer). It is a pure static page that requires no build tools to run.

Tech Stack

  • Bootstrap 5 (responsive layout framework)
  • jQuery (DOM manipulation and interactions)
  • Third-party plugins: Owl Carousel, Swiper, meanMenu, jQuery UI Datepicker, YouTubePopUp, mixitup
  • Google Fonts: Plus Jakarta Sans, DM Sans, Covered By Your Grace
  • PHPMailer (contact form backend)

Project Structure

text
tourinhtml-10/
├── documentation/          # Template usage documentation
│   └── index.html
├── tourin/                  # Actual template directory
│   ├── index.html           # Homepage (Style 1)
│   ├── index2.html          # Homepage (Style 2)
│   ├── tour.html            # Tour list
│   ├── tour-grid.html       # Grid layout
│   ├── tour-list.html       # Sidebar list
│   ├── tour-details.html    # Attraction details
│   ├── destination.html     # Destination page
│   ├── blog*.html           # Blog-related pages
│   ├── cart.html            # Shopping cart
│   ├── checkout.html        # Checkout page
│   ├── contact.html         # Contact page (with form)
│   ├── contact.php          # Email sending script
│   ├── 404.html             # Error page
│   └── assets/
│       ├── bootstrap/       # Bootstrap source
│       ├── css/             # Style files (style.css, responsive.css, etc.)
│       ├── img/             # Image assets
│       └── js/              # Script files

Key File Descriptions

  • tourin/index.html — Homepage entry, includes top navigation, slideshow, popular attractions, etc.
  • tourin/assets/css/style.css — Global styles, defines CSS variables, buttons, layout, and core styles
  • tourin/assets/js/contact.js — Contact form submission logic
  • tourin/contact.php — Email sending backend script (requires PHP environment)
  • tourin/PHPMailer/ — PHPMailer library for sending emails via the contact form
  • tourin/tour-details.html — Single attraction detail page template

Quick Start

  1. Open tourin/index.html directly in your browser to preview the full result
  2. To run with a local server (recommended), execute:
bash
# Python 3
python -m http.server 8080

# Or use VS Code Live Server extension
  1. The contact form requires deployment to a PHP environment, and you need to replace the email address in contact.php with a real inbox

Usage Suggestions

  • Before going live, replace all demo content with real travel data, and configure a valid SMTP service for the contact form
  • CSS variables are centralized at the top of style.css, making it easy to change the theme colors uniformly
help_outline

FAQ