Welcome to Triip ! Get familiar with the STriipe products and explore their features:
Well organized and easy to understand. You can any work by following our docs easily
Code is clean if it can be understood.Our code is more formatting for your website
Our Template is full Perfect for all device. You can visit our template all device easily.
The template has Sass available for css. You can Change and customize css by sass.
Triip is faster loading speed. Triip create your template so much faster and easier
We are provide 24 hours support for all clients.You can purchase without hesitation.
Welcome to Triip
Triip is a contemporary HTML Template designed for travel and tour booking websites. Enjoy personalized experiences, from guided tours to off-the-beaten-path excursions, ensuring every moment is unforgettable. With top-notch accommodations, seamless transportation, and expert guides, your journey will be as comfortable as it is exciting. Whether traveling solo, with family, or in a group, we cater to all your needs with customized plans that suit your preferences and budget. Let us take care of the details while you focus on making memories. Embark on a journey of a lifetime with us—where your travel dreams become reality.
Triip – is highly customizable – looks awesome on tablets and mobile devices. We have included best web development practices – you can create a great website layout based on Bootstrap or Grid 1320px.
After purchasing Triip template on themeforest.net with your Envato account, go to your Download page. You can choose to download Triip template only or the entire Triip template package which contains the following files:
Installing a Triip template is not like WordPress or CMS theme installation, actually, installation keyword does not go with Triip template. Why? because you don’t install anything, yes Triip or HTML templates are automatically rendered by the browser.
Before all that you have to edit your template and place your own contents by replacing old demo contents, in this case, you will need a code editor such as – VScode, Sublime Text, etc. When template editing is done using editor, save the files and folder and go ahead to upload template files on live server.
First of all, If you don’t have your template on your computer, download Triip template to get started, when download/purchase complete you will get a package like this screenshot (after unzip).
This template is a fixed layout with four columns. The main contents are inside the 'body' tag divided into different section (i.e. header, banner, services,... footer etc.). The general template structure is the same throughout the template. Here is the general structure.
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Triip Tour & Travel HTML Template</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Place favicon.ico in the root directory -->
<link rel="shortcut icon" type="image/x-icon" href="assets/imgs/favicon.svg">
<!-- CSS here -->
<link rel="stylesheet" href="assets/css/vendor/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/vendor/animate.min.css">
<link rel="stylesheet" href="assets/css/plugins/flatpickr.min.css">
<link rel="stylesheet" href="assets/css/plugins/swiper.min.css">
<link rel="stylesheet" href="assets/css/plugins/nice-select.css">
<link rel="stylesheet" href="assets/css/plugins/jquery-ui.css">
<link rel="stylesheet" href="assets/css/plugins/magnific-popup.css">
<link rel="stylesheet" href="assets/css/vendor/fontawesome-pro.css">
<link rel="stylesheet" href="assets/css/main.css">
</head>
<!-- JS here -->
<script src="assets/js/vendor/jquery-3.7.1.min.js"></script>
<script src="assets/js/vendor/waypoints.min.js"></script>
<script src="assets/js/vendor/bootstrap.bundle.min.js"></script>
<script src="assets/js/plugins/meanmenu.min.js"></script>
<script src="assets/js/plugins/swiper.min.js"></script>
<script src="assets/js/plugins/counterup.js"></script>
<script src="assets/js/plugins/jquery.nice-select.min.js"></script>
<script src="assets/js/plugins/magnific-popup.min.js"></script>
<script src="assets/js/plugins/jquery-ui.js"></script>
<script src="assets/js/plugins/flatpickr.js"></script>
<script src="assets/js/plugins/wow.js"></script>
<script src="assets/js/plugins/jquery.appear.js"></script>
<script src="assets/js/plugins/jarallax.min.js"></script>
<script src="assets/js/vendor/ajax-form.js"></script>
<script src="assets/js/main.js"></script>
</body>
</html>
We are using one customed CSS files (style.css) and several vendor css files. CSS file structure is as follows:
/************ TABLE OF CONTENTS ***************
-----------------
01. THEME CSS
-----------------
1.1 Commmon
1.2 Theme
-----------------
02. utils CSS
-----------------
2.1 Breakpoint
2.2 Colors
2.3 Extends
2.4 Mixins
2.5 Root
2.6 Typography
-----------------
03. COMPONENTS CSS
-----------------
3.1 Animation
3.2 Back to top
3.3 Breadcrumb
3.4 Button
3.5 Offcanvas
3.6 Prealoder
3.7 Section-title
-----------------
04. HEADER CSS
-----------------
4.1 Header 1
4.2 Header 2
4.3 Header top
---------------------------------
05. MENU CSS
---------------------------------
5.1 Meanmenu
5.2 Menu
---------------------------------
06. FOOTER CSS
---------------------------------
6.1 Footer 1
6.2 Footer Top
---------------------------------
07. BANNER CSS
---------------------------------
7.1 Banner Style 01
7.2 Banner Style 02
---------------------------------
08. PAGES CSS
---------------------------------
8.1 About css
8.2 Benifit css
8.3 Blog css
8.4 Chose css
8.5 Contact css
8.6 Counter css
8.7 Destination css
8.8 Destination Details css
8.9 Explor css
8.10 Faq css
8.11 Login css
8.12 Newsletter css
8.13 Offer css
8.14 Pricing css
8.15 Privacy & Policy css
8.16 Team css
8.17 Team-Details css
8.18 Testmonial css
8.19 Tour css
8.20 Tour Details css
There is a custom .js file named main.js and are several vendor js files as plugins. We are using jQuery(a javascript library) instead of vanilla javascript. Our file structure is a follows:
To change any images of the website
Example: Suppose you want to change the following image file:
<div class="logo">
<a href="index.html">
<img src="assets/imgs/logo/logo.svg" alt="logo">
</a>
</div>
To change any images of the website
Example: Suppose you want to change the following image file:
<div class="logo">
<a href="index.html">
<img src="assets/imgs/logo/logo.svg" alt="logo">
</a>
</div>
We have used scss for this project to write css. If you are familiar with scss you should customize only the .scss files. Please make sure you compile the style.scss file after you have made changes in any of the .scss files.
Have a look at the following image for a visual description:
Welcome to Triip Header Elements! You can choose 3 Types of header package for creating you website.
<!-- Header area start -->
<header>
<div class="header_top-item d-none d-md-block fix">
<div class="container-fluid">
<div class="header_top ">
<div class="header_clock">
<p>
<span><i class="fa-regular fa-clock-twelve"></i></span>
Mon - Fri: 9am - 5pm
</p>
</div>
<div class="header_top-bg">
<div class="header_contact">
<ul>
<li>
<p>Welcome To Travel Agency</p>
</li>
<li>
<a href="mailto:info@triip.com">
<span><i class="fa-light fa-envelope"></i></span>
info@triip.com
</a>
</li>
<li>
<a href="#">
<span><i class="fa-light fa-location-dot"></i></span>
380 Albert st, melbourne, australia
</a>
</li>
</ul>
</div>
<div class="header_social">
<ul>
<li>
<a href="#">
<i class="fa-brands fa-facebook-f"></i>
</a>
</li>
<li>
<a href="#">
<i class="fa-brands fa-instagram"></i>
</a>
</li>
<li>
<a href="#">
<i class="fa-brands fa-linkedin-in"></i>
</a>
</li>
<li>
<a href="#">
<i class="fa-brands fa-x-twitter"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="header-sticky">
<div class="container-fluid">
<div class="main_header">
<div class="header_left">
<div class="logo">
<a href="index.html">
<img src="assets/imgs/logo/logo.svg" alt="logo">
</a>
</div>
<div class="main-menu">
<nav id="mobile-menu">
<ul>
<li class="has_dropdown">
<a href="index.html">Home</a>
<ul class="sub-menu">
<li>
<a href="index.html">Home One</a>
</li>
<li>
<a href="index-2.html">Home Two</a>
</li>
</ul>
</li>
<li class="has_dropdown">
<a href="javascript:void(0)"> Destination</a>
<ul class="sub-menu">
<li>
<a href="destination.html">Destination</a>
</li>
<li>
<a href="destination-details.html">Destination Details</a>
</li>
</ul>
</li>
<li class="has_dropdown">
<a href="javascript:void(0)"> Tour</a>
<ul class="sub-menu">
<li>
<a href="tour-right-sidebar.html">Right Sidebar</a>
</li>
<li>
<a href="tour-left-sidebar.html">Left Sidebar</a>
</li>
<li>
<a href="tour-details.html">Tour Details</a>
</li>
</ul>
</li>
<li class="has_dropdown">
<a href="javascript:void(0)">Pages</a>
<ul class="sub-menu">
<li>
<a href="about.html">About</a>
</li>
<li>
<a href="pricing.html">Pricing</a>
</li>
<li>
<a href="faq.html">Faq</a>
</li>
<li>
<a href="terms-conditions.html">Terms & Condition</a>
</li>
<li>
<a href="login.html">Login</a>
</li>
<li>
<a href="registration.html">Register</a>
</li>
<li>
<a href="404.html">404</a>
</li>
</ul>
</li>
<li class="has_dropdown">
<a href="javascript:void(0)"> Team</a>
<ul class="sub-menu">
<li>
<a href="team-one.html">Team Style 1</a>
</li>
<li>
<a href="team-two.html">Team Style 2</a>
</li>
<li>
<a href="team-details.html">Team Details</a>
</li>
</ul>
</li>
<li>
<a href="about.html">About</a>
</li>
<li>
<a href="contact.html"> contact</a>
</li>
</ul>
</nav>
</div>
</div>
<div class="bars_icon d-lg-none">
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
</div>
<div class="header_right">
<a class="header_btn" href="#">
Start Booking
</a>
<div class="contact_number">
<div class="call_icon">
<i class="fa-light fa-phone"></i>
</div>
<a href="tel:878-185-287">
<span>Contact hotline</span>
878 - 185 - 287
</a>
</div>
</div>
</div>
</div>
</div>
</header>
<!-- Header area end -->
<!-- Header area start -->
<header>
<div class="header_style-two-top d-none d-lg-block">
<div class="container-fluid">
<div class="header_two-bg">
<div class="header_contact header_contact-two">
<ul>
<li>
<p>Welcome To Travel Agency</p>
</li>
<li>
<a href="mailto:info@triip.com">
<span><i class="fa-light fa-envelope"></i></span>
info@triip.com
</a>
</li>
<li>
<a href="#">
<span><i class="fa-light fa-location-dot"></i></span>
380 Albert st, melbourne, australia
</a>
</li>
</ul>
</div>
<div class="header_social-two">
<p>Follow Us:</p>
<ul>
<li><a href="#"><i class="fa-brands fa-facebook-f"></i></a></li>
<li><a href="#"><i class="fa-brands fa-linkedin-in"></i></a></li>
<li><a href="#"><i class="fa-brands fa-instagram"></i></a></li>
<li><a href="#"><i class="fa-brands fa-whatsapp"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="header-sticky">
<div class="container">
<div class="main_header main_header-style-two">
<div class="header_left">
<div class="logo">
<a href="index.html">
<img src="assets/imgs/logo/logo.svg" alt="logo">
</a>
</div>
<div class="main-menu">
<nav id="mobile-menu">
<ul>
<li class="has_dropdown">
<a href="index.html">Home</a>
<ul class="sub-menu">
<li>
<a href="index.html">Home One</a>
</li>
<li>
<a href="index-2.html">Home Two</a>
</li>
</ul>
</li>
<li class="has_dropdown">
<a href="javascript:void(0)"> Destination</a>
<ul class="sub-menu">
<li>
<a href="destination.html">Destination</a>
</li>
<li>
<a href="destination-details.html">Destination Details</a>
</li>
</ul>
</li>
<li class="has_dropdown">
<a href="javascript:void(0)"> Tour</a>
<ul class="sub-menu">
<li>
<a href="tour-right-sidebar.html">Right Sidebar</a>
</li>
<li>
<a href="tour-left-sidebar.html">Left Sidebar</a>
</li>
<li>
<a href="tour-details.html">Tour Details</a>
</li>
</ul>
</li>
<li class="has_dropdown">
<a href="javascript:void(0)">Pages</a>
<ul class="sub-menu">
<li>
<a href="about.html">About</a>
</li>
<li>
<a href="pricing.html">Pricing</a>
</li>
<li>
<a href="faq.html">Faq</a>
</li>
<li>
<a href="terms-conditions.html">Terms & Condition</a>
</li>
<li>
<a href="login.html">Login</a>
</li>
<li>
<a href="registration.html">Register</a>
</li>
<li>
<a href="404.html">404</a>
</li>
</ul>
</li>
<li class="has_dropdown">
<a href="javascript:void(0)"> Team</a>
<ul class="sub-menu">
<li>
<a href="team-one.html">Team Style 1</a>
</li>
<li>
<a href="team-two.html">Team Style 2</a>
</li>
<li>
<a href="team-details.html">Team Details</a>
</li>
</ul>
</li>
<li>
<a href="about.html">About</a>
</li>
<li>
<a href="contact.html"> contact</a>
</li>
</ul>
</nav>
</div>
</div>
<div class="bars_icon d-lg-none">
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
</div>
<div class="header_right">
<div class="contact_number contact_number-two">
<div class="call_icon">
<i class="fa-light fa-phone"></i>
</div>
<a href="tel:+00977445955">
+00 977 445 955
</a>
</div>
</div>
</div>
</div>
</div>
</header>
<!-- Header area end -->
Welcome to Triip Footer You can select any footer & customize easily and build your website.
Awesome Footer styles. See below image and code for more information.
<!-- Footer area start -->
<footer>
<div class="footer_area fix">
<div class="footer_top">
<div class="container">
<div class="footer_banner">
<div class="footer_left" data-background="assets/imgs/banner/footer-banner.png">
<h4 class="footer_title">Make a Tour</h4>
<button class="theme_btn"> book now</button>
<img class="footer_banner-plan d-none d-lg-block" src="assets/imgs/shape/footer-banner-plan.png" alt="footer shape">
</div>
<div class="footer_right">
<p>call for support</p>
<a href="tel:+00977445955"><span><i class="fa-light fa-phone"></i></span> +00 977 445 955</a>
</div>
</div>
</div>
<img class="footer_camera d-none d-md-block" src="assets/imgs/footer/camera.png" alt="footer shape">
</div>
<div class="footer_mid footer-space">
<div class="container">
<div class="row gy-40">
<div class="col-sm-6 col-lg-4 col-xl-4">
<div class="footer-widget">
<div class="footer-logo">
<a href="index.html">
<img src="assets/imgs/logo/logo-white.svg" alt="logo">
</a>
</div>
<p>
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration.
</p>
<div class="footer-social-icon">
<ul>
<li><a href="#"><i class="fa-brands fa-facebook-f"></i></a></li>
<li><a href="#"><i class="fa-brands fa-linkedin-in"></i></a></li>
<li><a href="#"><i class="fa-brands fa-instagram"></i></a></li>
<li><a href="#"><i class="fa-brands fa-whatsapp"></i></a></li>
</ul>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-3 col-xl-3">
<div class="footer-widget-2 footer-common-widget">
<h4 class="footer-widget-title"> Company</h4>
<div class="footer_info-wrap">
<ul>
<li>
<a href="#"><span><i class="fal fa-home-lg-alt"></i></span>
2972 Westheimer Rd. Santa Ana,Illinois 85486
</a>
</li>
<li>
<a href="mailto:contact@example.com">
<span><i class="fa-light fa-envelope"></i></span>
Contact@example.com
</a>
</li>
<li>
<a href="tel:(229)555-0109">
<span><i class="fa-light fa-phone"></i></span>
(229) 555-0109
</a>
</li>
<li>
<p>
<span> <i class="fa-regular fa-clock-twelve"></i></span>
Mon - Fri: 9am - 5pm
</p>
</li>
</ul>
</div>
</div>
</div>
<div class="col-6 col-lg-2 col-xl-3">
<div class="footer-widget-3 footer-common-widget">
<h4 class="footer-widget-title">
Quick Links
</h4>
<div class="footer-link">
<ul>
<li> <a href="#"> search</a> </li>
<li> <a href="#"> about us</a> </li>
<li> <a href="#"> contact us</a> </li>
<li> <a href="#"> policy</a> </li>
<li> <a href="#"> terms of service</a> </li>
</ul>
</div>
</div>
</div>
<div class="col-6 col-lg-3 col-xl-2">
<div class="footer-widget-4 footer-common-widget">
<h4 class="footer-widget-title"> Tour</h4>
<div class="footer-link">
<ul>
<li> <a href="#"> about us</a> </li>
<li> <a href="#"> privacy policy</a> </li>
<li> <a href="#"> contact us</a> </li>
<li> <a href="#"> terms & conditions</a> </li>
<li> <a href="#"> terms & service</a> </li>
</ul>
</div>
</div>
</div>
</div>
</div>
<img class="footer_plan" src="assets/imgs/footer/footer-plan.png" alt="footer shape">
<img class="footer_map" src="assets/imgs/footer/footer-map.png" alt="footer shape">
<img class="footer_shape2" src="assets/imgs/footer/footer-shape2.png" alt="footer shape">
</div>
<div class="footer-bottom">
<div class="container">
<div class="footer-bottom-inner">
<div class="footer-copyright-text">
<p>
Copyright © 2024
<a href="index.html"> Triip. </a>
All rights reserved
</p>
</div>
<div class="payment_method">
<ul>
<li>
<a href="#"><img src="assets/imgs/footer/visa.svg" alt="payment img"></a>
</li>
<li>
<a href="#"><img src="assets/imgs/footer/mastercard.svg" alt="payment img"></a>
</li>
<li>
<a href="#"><img src="assets/imgs/footer/discover.svg" alt="payment img"></a>
</li>
<li>
<a href="#"><img src="assets/imgs/footer/paypal.svg" alt="payment img"></a>
</li>
<li>
<a href="#"><img src="assets/imgs/footer/jcb.svg" alt="payment img"></a>
</li>
</ul>
</div>
</div>
</div>
</div>
<img class="footer_bg-shape" src="assets/imgs/footer/footer-shape.png" alt="footer-shape">
</div>
</footer>
<!-- Footer area end -->
We've used the following fonts, free icons and plugins as listed:
Thank you for purchasing my template.
If you have any questions that are
beyond the scope of this help file, please feel free to open a new ticket at our
Support
forum
Update Change log View Changelog Here
If you need to theme customization or make custom theme or template. Please, you can contact us for this.
Contact Us
If you need to theme customization or make custom theme or template. Please, you can contact us for this.
Contact