Touriza – Travel Booking HTML Template preview 1

Touriza – Travel Booking HTML Template

bookmark

Touriza is a travel/tourism booking HTML template that includes over ten complete pages such as homepage, destinations, tours, blog, team, etc. It features Swiper carousel, responsive layout, and jQuery interaction logic, making it suita...

HTML

Project Overview

Touriza is a travel/tourism booking HTML template that includes over ten complete pages such as homepage, destinations, tours, blog, team, etc. It features Swiper carousel, responsive layout, and jQuery interaction logic, making it suitable for quickly building travel websites.

Tech Stack

  • HTML5 / CSS3 (SCSS source + compiled CSS)
  • jQuery (main interactions)
  • Swiper.js (carousel component)
  • Bootstrap 5 (grid and basic components)
  • Google Fonts (Roboto / Nunito / Inter Tight, etc.)

Project Structure

text
tourizahtml-10/
├── touriza-html/          # Template main directory
│   ├── assets/
│   │   ├── css/style.css # Compiled full stylesheet
│   │   ├── scss/         # SCSS source (customizable variables)
│   │   └── js/main.js    # Shared interaction script for all pages
│   ├── index.html        # Homepage (Version 1)
│   ├── index-two.html    # Homepage (Version 2)
│   ├── index-three.html  # Homepage (Version 3)
│   ├── index-four.html   # Homepage (Version 4)
│   ├── index-five.html   # Homepage (Version 5)
│   ├── index-six.html    # Homepage (Version 6)
│   ├── index-seven.html  # Homepage (Version 7)
│   ├── index-eight.html  # Homepage (Version 8)
│   ├── index-nine.html   # Homepage (Version 9)
│   ├── about.html        # About Us
│   ├── destination.html  # Destination list
│   ├── destination-details.html
│   ├── tour.html         # Tour list
│   ├── tour-details.html
│   ├── blog.html         # Blog list
│   ├── blog-details.html
│   ├── contact.html      # Contact page
│   └── team.html         # Team page
└── touriza-documentation/ # Official documentation site
    └── index.html

Core File Description

  • touriza-html/index.html — Homepage entry, showcasing typical travel sections like banner, popular destinations, featured tours
  • touriza-html/assets/js/main.js — All interaction logic, including 16 functional modules such as Swiper initialization, smoothscroll, stickyheader, back-to-top
  • touriza-html/assets/scss/style.css — SCSS source entry, defining color variables, responsive breakpoints, component styles; main CSS loaded via assets/css/style.css
  • touriza-html/assets/css/style.css — Compiled full CSS, defining theme color variables like --color-primary: #BA6827
  • touriza-html/destination.html — Destination list page with filter/search interactions
  • touriza-html/contact.html — Contact page with form and map placeholder

Quick Start

bash
# Open homepage directly in browser
open touriza-html/index.html

# Or start any static server
npx serve touriza-html

Usage Suggestions

  • For production projects, use SCSS source (scss/style.css) to modify global colors and fonts for easy theme switching; for minor changes, directly edit CSS variables in assets/css/style.css
  • The template includes 9 homepage variants; it's recommended to choose one based on actual business needs as the entry point to avoid redundant code
help_outline

FAQ