Changing Content
All content is in plain HTML. Edit the text directly in any .html file. Key sections are marked with HTML comments:
<!--Main Slider Start-->
<!--Tour Search Start-->
<!--Popular Tours Start-->
<!--Site Footer Redesign Start-->Tripura — Travel & Tour Template
A modern, responsive HTML template designed for travel agencies, tour operators, and tourism businesses. Clean design, rich UI components, smooth animations, and a mobile-first approach.
Installation
No build tools or compiling required. Simply extract and open.
- Extract the template files to your desired directory.
- Open
index.htmlin a browser to preview. - For the contact form, deploy on a PHP-enabled server.
Quick Preview: Open any
.html file directly in your browser — everything works out of the box.
Project Structure
tripura/
├── index.html # Home One (primary homepage)
├── index2.html # Home Two (alternate homepage)
├── about.html # About page
├── contact.html # Contact page
├── destinations.html # Destinations listing
├── destinations-details.html # Destination detail
├── tours.html # Tours grid view
├── tours-list.html # Tours list view
├── tour-details.html # Tour detail
├── news.html # News / blog listing
├── news-details.html # News article
│
└── assets/
├── css/
│ ├── tripura.css # Main stylesheet
│ └── tripura-responsive.css # Responsive breakpoints
├── js/
│ └── tripura.js # Main JavaScript
├── images/ # All template images
├── inc/
│ └── sendemail.php # Contact form handler
└── vendors/ # Third-party libraries
├── index.html # Home One (primary homepage)
├── index2.html # Home Two (alternate homepage)
├── about.html # About page
├── contact.html # Contact page
├── destinations.html # Destinations listing
├── destinations-details.html # Destination detail
├── tours.html # Tours grid view
├── tours-list.html # Tours list view
├── tour-details.html # Tour detail
├── news.html # News / blog listing
├── news-details.html # News article
│
└── assets/
├── css/
│ ├── tripura.css # Main stylesheet
│ └── tripura-responsive.css # Responsive breakpoints
├── js/
│ └── tripura.js # Main JavaScript
├── images/ # All template images
├── inc/
│ └── sendemail.php # Contact form handler
└── vendors/ # Third-party libraries
Pages
The template includes 11 HTML pages covering all essential sections of a travel website.
Home One
index.htmlPrimary homepage with hero slider, tour search, popular tours, video section, testimonials, and more.
Home Two
index2.htmlAlternate homepage with Vegas slider, featured journeys, destinations grid, counter stats, and tour types.
About
about.htmlCompany overview with team members, tour categories, video section, and testimonials.
Contact
contact.htmlContact form, info cards, and Google Maps embed.
Destinations
destinations.htmlDestination cards grid with country images and tour counts.
Destination Detail
destinations-details.htmlSingle destination with gallery, information, and sidebar.
Tours Grid
tours.htmlTour cards in grid layout with ratings, pricing, and meta.
Tours List
tours-list.htmlHorizontal tour listings with sidebar filters.
Tour Detail
tour-details.htmlFull tour page with itinerary, map, reviews, and booking form.
News
news.htmlBlog posts grid with date badges and author info.
News Detail
news-details.htmlFull article with comments, reply form, and sidebar.
Home One — index.html
- Redesigned minimal header with inline SVG logo
- Full-screen hero slider with rating badge, headline, and CTA
- Redesigned tour search bar (location, date, type, guests)
- Discover section with destination cards
- Popular tours grid
- Video section with parallax background
- Why Choose Us section
- Testimonials slider
- Brand partners
- Newsletter / footer section with large brand text
Home Two — index2.html
- Top bar with contact info and social links
- Full navigation with dropdown menus
- Vegas background slider banner
- Redesigned tour search form
- Three icon feature boxes (Best Price, Quick Booking, Best Selection)
- Featured journeys grid (6 cards)
- Singapore spotlight with odometer counter
- Video parallax section
- Counter stats section
- Destinations grid with promotional banner
- About section with video popup
- Tour types icons
- Brand partners carousel and news carousel
- Book Now CTA
About — about.html
- Page header with breadcrumb
- About content with image and video popup
- Feature list with check icons
- Tour categories
- Team members grid
- Video section
- Brand partners and testimonials
Destinations — destinations.html & destinations-details.html
- Listing: Destination cards grid with country images and tour counts
- Detail: Image gallery, tour information, discount section, sidebar with related tours
Tours — tours.html, tours-list.html & tour-details.html
- Grid: Tour cards with ratings, pricing, and meta info
- List: Horizontal layouts with sidebar filters (price range, categories, duration)
- Detail: Gallery, overview, itinerary accordion, map, reviews with form, booking sidebar
News — news.html & news-details.html
- Listing: Blog posts grid with date badges, author info, comments
- Detail: Full article, author bio, comment section with reply form, sidebar
Contact — contact.html
- Contact form (connected to
sendemail.php) - Contact info cards (phone, email, address)
- Google Maps embed
CSS
| File | Description |
|---|---|
tripura.css |
Main stylesheet — all component styles, layout, typography, colors, and animations |
tripura-responsive.css |
Media queries for responsive breakpoints (mobile, tablet, desktop) |
JavaScript
| File | Description |
|---|---|
tripura.js |
Main JS — navigation, sliders, counters, popups, scroll effects, form validation, and all interactive components |
Images
| Directory | Count | Description |
|---|---|---|
backgrounds/ |
14 | Hero sliders, page headers, parallax backgrounds |
blog/ |
16 | News article images, author avatars, comment avatars |
destination/ |
10 | Destination card images with country themes |
gallery/ |
5 | Photo gallery section images |
resources/ |
30 | Logos, tour card images, review avatars, about images |
shapes/ |
9 | Decorative SVG/PNG shapes and map patterns |
team/ |
4 | Team member profile photos |
testimonial/ |
3 | Testimonial author images |
Vendor Libraries
All third-party libraries are included locally in assets/vendors/. Additionally, Tailwind CSS is loaded via CDN (preflight disabled to avoid Bootstrap conflicts).
| Library | Purpose |
|---|---|
| Bootstrap 5.x | Grid system, responsive utilities, components |
| jQuery 3.6.0 | DOM manipulation and plugin support |
| Swiper | Touch-enabled hero sliders and carousels |
| Owl Carousel | News and testimonial carousels |
| WOW.js | Scroll-triggered reveal animations |
| Animate.css | CSS animation library |
| Jarallax | Parallax scrolling effects |
| Magnific Popup | Lightbox for images and videos |
| Odometer | Animated number counters |
| Isotope | Filterable grid layouts |
| noUiSlider | Price range slider (tour filters) |
| wNumb | Number formatting for sliders |
| jQuery UI | Datepicker for search forms |
| TimePicker | Time selection widget |
| Bootstrap Select | Styled select dropdowns |
| Vegas | Background slideshow (Home Two banner) |
| Tiny Slider | Lightweight slider alternative |
| BxSlider | Content slider |
| TwentyTwenty | Before/after image comparison |
| jQuery Appear | Trigger events when elements enter viewport |
| jQuery Circle Progress | Circular progress bars |
| jQuery Validate | Form validation |
| jQuery Ajax Chimp | Mailchimp form integration |
| Countdown | Countdown timer |
| Font Awesome 5.x | Icon library |
| Tripura Icons | Custom icon font for travel-themed icons |
| Reey Font | Custom decorative font |
Changing Colors
The primary brand color is defined in two places:
1. Tailwind Config (in each HTML <head>)
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#e8604c',
dark: '#1a1a2e',
}
}
}
}
</script>2. CSS
Search for hex values #e8604c and #1a1a2e in tripura.css and replace them with your brand colors.
Changing Logo
- Home One uses an inline SVG logo with the text "Tripura" — edit the SVG and
<span>in the header markup. - Inner pages reference
assets/images/resources/logo-light.svg— replace this file with your own logo.
Contact Form
The contact form submits to assets/inc/sendemail.php. Update the email address in that file to receive form submissions.
Note: Requires a PHP-enabled web server to process form submissions.
Responsive Design
Fully responsive with breakpoints defined in tripura-responsive.css:
| Breakpoint | Target |
|---|---|
≥ 1200px |
Large desktops |
992 – 1199px |
Desktops / small laptops |
768 – 991px |
Tablets |
576 – 767px |
Large phones |
≤ 575px |
Small phones |
Key Responsive Behaviors
- Navigation collapses to a mobile slide-out menu
- Tour search form stacks vertically on smaller screens
- Grid layouts reduce columns (3 → 2 → 1)
- Font sizes scale down proportionally
- Footer brand text uses
clamp()for fluid sizing
Browser Support
| Browser | Support |
|---|---|
| Chrome | Latest 2 versions |
| Firefox | Latest 2 versions |
| Safari | Latest 2 versions |
| Edge | Latest 2 versions |
| Opera | Latest 2 versions |
| IE 11 | Not supported |
Credits
Tripura — Travel and Tour HTML Template