Travel Studio Documentation

Complete guide to customizing and extending the Travel Studio travel agency HTML template.

Travel Studio is a modern, fully responsive single-page HTML template designed for travel agencies, tour operators, and travel experience companies. It features a sleek design with interactive carousels, animated sections, filterable packages, and detail modals — all without requiring any build tools or frameworks.

File Structure

Tech Stack

Quick Start

1. Unzip the template files to your desired folder.
2. Open index.html in any code editor (VS Code recommended).
3. Open index.html in a browser to preview the site (or use a local server like Live Server for VS Code).
4. Customize content, images, colors, and fonts by following the sections below.
5. Deploy by uploading all files to your web hosting server.

Colors & Fonts

Changing Colors

The template uses CSS custom properties (variables) defined in style.css. The main colors are overridden via inline styles in index.html. To change the primary color scheme, find the <style> block at the top of index.html (around line 19):

/* Key CSS variables in style.css */
--color-primary: #20282D;    /* Dark — used for headings, buttons, footer */
--color-body: #5D666F;       /* Gray — used for body text */
--color-blue: #0b4df5;       /* Blue — used for accents, links */

To change these globally, add overrides to the inline <style> block in the <head>:

:root {
    --color-primary: #1a365d;  /* Your new primary color */
    --color-body: #4a5568;     /* Your new body text color */
    --color-blue: #3182ce;     /* Your new accent color */
}

Changing Fonts

The template loads Google Fonts via the <link> tag on line 15-17. Current fonts:

• Headings: Playfair Display (serif)
• Body text: Poppins (sans-serif)

To change fonts:

1. Visit Google Fonts and pick your fonts.
2. Replace the Google Fonts <link> tag with your new embed code.
3. Update the font override block in the inline <style> (around line 20-34):

/* Font Override — change these to your new fonts */
h1, h2, h3, h4, h5, h6,
.title {
    font-family: "Your Heading Font", serif !important;
}
body, p, a, li, span, input,
textarea, select, button {
    font-family: "Your Body Font", sans-serif !important;
}

Logo & Favicon

Changing the Logo

The logo appears in two places — the header navbar and the mobile sidebar. Both reference the same file:

1. Replace assets/images/logo/travel-studion-logo.png with your logo file.
2. If using a different filename, update these two lines in index.html:

<!-- Header logo (around line 635) -->
<img src="assets/images/logo/your-logo.png" alt="your-logo">

<!-- Mobile sidebar logo (around line 682) -->
<img src="assets/images/logo/your-logo.png" alt="your-logo" style="max-width: 140px;">

Changing the Favicon

Replace assets/images/travel-studio-fav.png with your favicon, or update line 7:

<link rel="shortcut icon" href="assets/images/your-favicon.png">

Navigation

The navbar uses one-page scroll navigation. Each link points to a section ID:

To add or rename nav links, edit the <ul> inside .nav-area (around line 657) and update the corresponding mobile sidebar nav (around line 691).

Hero Section

The hero is a 3-slide Swiper carousel. Each slide has a background image set via CSS classes in style.css:

To change hero backgrounds, simply replace the image files in assets/images/banner/. Recommended size: 1920x850px (JPEG, optimized).

To edit slide content (titles, descriptions, CTAs), find the .swiper-slide blocks starting around line 706. Each slide contains:

• A badge text (.hero-badge)
• Heading (h1.title)
• Description (p.disc)
• CTA buttons (.hero-cta-group)
• Stats/trust indicators on the right column

About Section

Located around line 883 with ID #about. Contains:

• Main image: assets/images/about/about-main.jpg (replace with your photo)
• Small overlay image: assets/images/about/about-small.jpg
• Years of experience counter (change the number in the .experience-info block)
• Feature list with icons
• Description paragraph

Destinations Section

Located around line 1123 with ID #service. Contains 4 destination cards with the Swiper carousel. Each card has:

<div class="single-service-signle-wrapper" data-filter="Beach">
    <img src="assets/images/service/beach.jpg">
    <h5 class="title">Beach & Island Escapes</h5>
    <p>Description here...</p>
</div>

CTA Section

The "Ready for the adventure of a lifetime?" banner (around line 1233). Background image is set via CSS class .rts-call-to-action-area-two in style.css — references assets/images/cta/cta-bg.jpg. Replace that image to change the background.

Why Choose Us

Located around line 1259. Two-column layout with features on the left and images on the right. Features include icons with text (route, headset, shield, tags). Edit the li items inside .feature-list to change content. Images at assets/images/business-goal/goal-01.jpg and goal-02.jpg.

Statistics Counter

Animated counters that count up when scrolled into view (around line 1742). Background image: assets/images/counterup/counter-bg.jpg. Each counter uses the Odometer library:

<div class="odometer" data-count="50">0</div>
<span>Destinations Worldwide</span>

Change the data-count value to update the target number. The counter animates automatically on scroll.

Packages Section

Located around line 1780 with ID #project. Contains 8 tour package cards with filter controls. Each card structure:

<div class="package-card"
     data-category="Beach"
     data-price="1299">
    <span class="pkg-badge">Beach</span>
    <img src="assets/images/project/santorini.jpg">
    <h5 class="pkg-title">Santorini Getaway</h5>
    <p class="pkg-price">$1,299 <span>/person</span></p>
</div>

Team Section

Swiper carousel showing team members (around line 1994). Each member card:

<div class="team-single-one-start">
    <div class="team-image-area">
        <a><img src="assets/images/team/team-01.jpg"></a>
    </div>
    <h6 class="title">Name</h6>
    <span class="desig">Role</span>
    <!-- Social links -->
</div>

Team images: assets/images/team/team-01.jpg through team-04.jpg. Recommended size: 400x500px.

Testimonials

Three review cards (around line 2288). Each has a reviewer image, name, rating stars, and review text. Reviewer images at assets/images/testimonials/reviewer-01.jpg through reviewer-03.jpg.

Contact Form

Located around line 2745 with ID #contact. Fields: Full Name, Email, Phone, Trip Type (dropdown), Message. The form currently has no backend — see Dynamic Integration to connect it.

Blog Section

Located around line 2897 with ID #blog. Shows 6 blog cards (3 unique posts, each repeated once for the carousel). Each card:

<div class="single-blog-area-one" data-blog="1">
    <a><img src="assets/images/blog/blog-01.jpg"></a>
    <div class="bottom-details">
        <a class="blog-title">Title</a>
        <p>Travel Tips / <span>by Travel Studio</span></p>
    </div>
</div>

The data-blog attribute links cards to the blog modal content. See Blog Modal section.

Footer

Located around line 3734. Contains:

• Google Maps embed — replace the <iframe> src with your location's embed URL
• Office Hours — edit the hours text directly
• Quick Links — same anchor links as navbar
• Newsletter form — email input (no backend by default)
• Contact info — phone, email, address
• Copyright — auto-updates year via JavaScript

Filter & Search System

The packages section includes three filter controls:

To add a new filter category:

1. Add an <option> to the #pkgTypeFilter dropdown
2. Set matching data-category on your package cards
3. Optionally add a destination card with matching data-filter attribute

A "No packages found" fallback (#pkgNoResults) shows automatically when no cards match the filters. It includes a "Show all packages" reset link.

Blog Detail Modal

Clicking any blog card opens a full-screen modal with the article content. The modal features:

• Full-width hero image with gradient overlay
• Tag badge and date
• Article title and author info
• Scrollable HTML content
• Read time and social share footer

Blog content is stored in the blogData JavaScript object (around line 4104). See Adding New Blog Posts for how to add more.

Package Detail Modal

Clicking any package card opens a two-column modal:

• Left column (scrollable): Hero image, price tag, meta info (location, duration, group size, difficulty), description, highlights, what's included
• Right column (sticky): Booking form with name, email, travelers, trip type, travel date, and Book Now button

On mobile, columns stack vertically with the form below details. Package data is in the pkgData JavaScript object (around line 4180). See Adding New Packages.

Animations

The template uses GSAP with ScrollTrigger for scroll-based animations:

• Text reveal animation: Add class rts-text-anime-style-1 to any heading for a character-by-character reveal on scroll
• Fade-in animations: Elements with data-animation attributes animate on scroll via main.js
• Button hover: Horizontal wipe effect using ::before pseudo-element (width 0 → 100%)
• Swiper carousels: Auto-playing slideshows for hero, destinations, team, blog, and partner sections

Back to Top Button

A dark rounded-square button appears in the bottom-right corner after scrolling past 50px. Hover transforms it into a circle with a lift effect. Smooth fade-in/fade-out transitions. Styled via inline <style> near line 3897.

CSS Architecture

The template uses a layered CSS approach:

1. Plugin CSS — Third-party styles (Bootstrap, Swiper, Font Awesome, etc.)
2. style.css — Main template stylesheet (724 KB, compiled from SCSS). Contains all component styles and responsive rules.
3. Inline <style> blocks — Section-specific overrides using !important to customize individual components without modifying style.css

JavaScript Guide

All JavaScript is organized in two layers:

main.js — Core Logic

Uses the rtsJs object pattern with jQuery. Key methods:

Inline Scripts — Feature Logic

Located at the bottom of index.html (after line 3967):

Adding New Packages

Follow these 3 steps to add a new tour package:

Step 1: Add the Card HTML

Find the packages grid (around line 1808) and add a new card column:

<div class="col-lg-3 col-md-4 col-sm-6">
    <div class="package-card"
         data-category="Beach"
         data-price="1599">
        <div class="pkg-image">
            <span class="pkg-badge">Beach</span>
            <img src="assets/images/project/your-image.jpg" alt="Package Name">
        </div>
        <div class="pkg-content">
            <h5 class="pkg-title">Your Package Name</h5>
            <div class="pkg-meta">
                <span><i class="far fa-clock"></i> 7 Days</span>
                <span><i class="fas fa-users"></i> Up to 12</span>
            </div>
            <p class="pkg-price">$1,599 <span>/person</span></p>
        </div>
    </div>
</div>HTML

Step 2: Add Modal Data

Find the pkgData object (around line 4180) and add a new entry. The key must exactly match the .pkg-title text:

'Your Package Name': {
    img: 'assets/images/project/your-image-lg.jpg',
    price: '1,599',
    location: 'Country',
    duration: '7 Days / 6 Nights',
    groupSize: 'Up to 12',
    difficulty: 'Easy',
    desc: 'Your package description here...',
    highlights: [
        'Highlight 1',
        'Highlight 2',
        'Highlight 3'
    ],
    includes: ['Flights', 'Hotel', 'Breakfast']
}JS

Step 3: Add Filter Option (if new category)

If your package uses a new category, add an option to the #pkgTypeFilter dropdown:

<option value="NewCategory">New Category</option>HTML

Adding New Blog Posts

Follow these 2 steps:

Step 1: Add the Card HTML

Find the blog Swiper slides (around line 2910) and add a new slide:

<div class="swiper-slide">
    <div class="single-blog-area-one" data-blog="4">
        <a><img src="assets/images/blog/blog-04.jpg"></a>
        <div class="bottom-details">
            <a class="blog-title">Your Blog Title</a>
            <p>Travel Tips / <span>by Travel Studio</span></p>
        </div>
    </div>
</div>HTML

Step 2: Add Modal Data

Find the blogData object (around line 4104) and add a new entry with a unique key matching the data-blog attribute:

'4': {
    title: 'Your Blog Title',
    img: 'assets/images/blog/blog-04.jpg',
    tag: 'Category Tag',
    date: 'Mar 01, 2026',
    readTime: '5 min read',
    content: '<p>Your article HTML content...</p>'
}JS

Image Management

All images are in assets/images/. Recommended sizes:

SEO & Meta Tags

Update the <head> section of index.html with your site information:

<title>Your Site Title - Travel Agency</title>
<meta name="description" content="Your site description">
<meta name="keywords" content="travel, agency, tours">

<!-- Open Graph for social media sharing -->
<meta property="og:title" content="Your Site Title">
<meta property="og:description" content="Your description">
<meta property="og:image" content="https://yoursite.com/preview.jpg">HTML

Dynamic Integration

While this is a static template, you can connect it to backends or services:

Contact Form

The contact form (ID: #contact) and booking form (in the package modal) need backend integration. Options:

• Formspree: Add action="https://formspree.io/f/your-id" and method="POST" to the form tag
• EmailJS: Send emails directly from JavaScript without a backend
• Custom PHP: Create a mailer.php file and point the form action to it
• Netlify Forms: Add data-netlify="true" to the form tag if hosting on Netlify

Making Packages Dynamic

To load packages from a database/API instead of static HTML:

1. Replace the static pkgData object with an API fetch call
2. Generate the card HTML dynamically using JavaScript
3. Keep the same class names and data-* attributes for the filter system to work
4. Call filterAndSort() after rendering new cards

// Example: Fetch packages from API
fetch('/api/packages')
    .then(res => res.json())
    .then(packages => {
        const grid = document.querySelector('.row.g-4');
        packages.forEach(pkg => {
            grid.innerHTML += `
                <div class="col-lg-3 col-md-4 col-sm-6">
                    <div class="package-card"
                         data-category="${pkg.category}"
                         data-price="${pkg.price}">
                        ...
                    </div>
                </div>`;
        });
    });JS

Google Maps

The footer contains a Google Maps <iframe> embed. To change the location:

1. Go to Google Maps
2. Search your location
3. Click "Share" → "Embed a map"
4. Copy the <iframe> code and replace the existing one in the footer

CSS Variables Reference

Icon Reference

The template uses Font Awesome Pro icons with 4 weight prefixes:

Browse all available icons at fontawesome.com/icons.

ID Reference

Important element IDs used by JavaScript:

Credits & Licenses

Travel Studio Documentation — Built with care.