AllTerrain

AllTerrain HTML5 Responsive Website DOCUMENTATION

Powerful traveling blog and souvenir shop website template.

Introduction

Adventure Awaits — So Does Your New Website

Introducing the AllTerrain Website Template

The perfect digital launchpad for tour operators, travel agencies, outdoor experience brands, or travel blogs.

Built to inspire and convert, AllTerrain combines bold visuals, intuitive navigation, and strategic content sections designed to showcase unforgettable travel experiences. Whether you're offering off-road adventures, eco-tours, cultural journeys, or guided hikes — this template gives your brand the professional, immersive online presence it deserves.

AllTerrain is a premium, fully responsive website template designed for travel agencies, adventure tour companies, local guides, and outdoor experience providers. With bold visuals, clear call-to-actions, and purpose-built sections, this template helps you turn visitors into bookings — effortlessly.

Whether you're showcasing off-road tours, eco-hikes, cultural trips, or wine-tasting adventures, AllTerrain gives you a modern, professional online presence that inspires trust and drives sales.

AllTerrain is also perfect for those who wish to share their adventures via a blog.

Features

Fully Responsive Design
Mobile-first and optimized for all screen sizes
Bootstrap Slider with CTA Buttons
Capture attention instantly
Tours Section
Highlight your best tours with visuals and descriptions
Products Pages
If you need to sell tour souvenirs
Client Testimonials
Build credibility with real customer reviews
Integrated Blog Layout
Boost SEO and share travel stories
Clean Code and Easy Customization
Built for developers and beginners alike
Fast Loading and SEO-Friendly
Optimized for performance and visibility
Modern UI/UX Design
Focused on user experience and conversion

Technologies

Programming Languages & Tools

HTML5

CSS3

JAVASCRIPT

BOOTSTRAP 5.3

JQUERY 3.7.1

ANIMATIONS

OWL CAROUSEL

FANCYBOX

PAGESPEED PASS

PSD ASSETS

STRUCTURED CODE

COMMENTED CODE

MOBILE FIRST

CHROME

EDGE

FIREFOX

OPERA

SAFARI

What you get

Complete HTML/CSS/JS files
Documentation for easy setup and customization
Ready-to-edit sections and styles
Fully layered assets and components

Folder Structure

$data$
PSD assets for you to create your own images and backgrounds
Blog
Blog pages
Gallery
Gallery pages
Homepages
Home / index pages
Images
Website images
Includes
Menu and footer sections to be included in the website via JavaScript
Pages
Website miscellaneous pages
Shop
Shopping pages
Tours
Tours pages
Vendor
Website components
favicon.png
Website favicon, replace with your own with the same characteristics
index.html
Website index / startup page

Installation

Easy to install and customize

1
Files & web hosting
Unzip the files to a local folder then connect to your web hosting via FTP and upload the folders [images], [includes], [vendor] and the image [favicon.png] to the root of your web hosting folder.
2
The index.html file
The website needs an index.html file in order to load content when people navigate to your website's URL.
You should copy one of the homepages located in the [homepages] folder to the root of the website folder and rename it to index.html or change the extension to match the language you're using (e.g. .php, .asp, etc.).
Upload the new renamed file to the root of your server and now you should see it in the browser when you access you website's URL.
3
Other pages
Whenever you need to use one of the pages from this package, you just need to copy it from the corresponding folder, paste it into the root of your website folder, rename it, and edit the [menu.html] file in the [includes] folder.
4
New page from scratch
If you want to create your new page from scratch, copy the [page-template.html] from the [$data$] folder, paste it into the root of your website, and rename it.
Then you can just copy elements from other pages, paste them to your new page and upload the newly created page to your server.
Don't forget to include your new page in the [menu.html] file.
5
Customization
To customize any page or component from this template you just need to edit the [styles.css] file included in the [/vendor/impulsive/] folder and upload it to same folder on the server.

Usage

Page structure and what you need to edit

As you may understand, the template pages have test information and contents for example purposes.
In this section we will cover the pages structure and what sections you should edit.
Open the [$data$/page-template.html] page to follow this tutorial.
Try following this tutorial as closely as possible to maintain a high SEO score.

< head > Section

Description:
Google Tag Manager for analytics

What to edit:
Login to your Google Tag Manager account, create a new container for your domain and replace this code with the one from the new container.

Description:
Page title meta tag

Template page - AllTerrain HTML5 Template

What to edit:
Replace this title with the title of your page maintaining the same format.

Description:
Page and website information meta tags

What to edit:
Replace these meta tags content with your own page and website information.
The description meta tag should have 150-160 characters to prevent truncation in search results.

Description:
Creator meta tags

What to edit:
Replace these meta tags content with information from your company.

Description:
Open Graph meta tags

What to edit:
Replace these meta tags content with information from your website.
These tags are used by social media platforms like Facebook, X (formerly Twitter), LinkedIn, Pinterest, and WhatsApp to display content previews when your page URL is shared.
Edit the [og:image] image to whatever suits your website's best.

Description:
Twitter meta tags

What to edit:
Replace these meta tags content with information from your website.
Twitter meta tags, also known as Twitter Cards, are used by content publishers to control how their webpage links appear on Twitter, and by Twitter itself to display the correct title, description, and image for those links when they are shared.
Edit the [og:image] image to whatever suits your website's best.

Description:
CSS files used in the website

What to edit:
Uncomment [bundled.min.css] and remove the other CSS files when in production.
The [bundled.min.css] contains a minified version of all the other files.
Never remove the [styles.css] file.

Description:
Main website CSS file

/*-------------------------------------------------------------- TABLE OF CONTENTS: 1. Index Page 2. Globals 2.1 Links 2.2 Text Colors 2.3 Backgrounds 2.4 Buttons 2.5 Text Utilities 3. Headers 4. Utilities 4.1 Forms 4.2 Preloader 4.3 Homepage Image Slider 4.4 Homepage Video Background 4.5 Homepage Parallax Background 5. Testimonials Pages 6. Pages Header 7. Breadcrumbs 8. Progress Bars 9. Team Pages 10. Accordions 10.1 Accordion Style 1 10.2 Accordion Style 2 10.3 Accordion Style 3 10.4 Accordion Style 4 11. 404 Error Pages 12. Tours Pages 13. Blog Pages 14. Pagination 15. Masonry Pages 16. Double Slider 17. Shop Pages 18. Gallery Pages 19. Footer 20. Responsive */

What to edit:
The main CSS file is commented so you can easily edit and customize your website.

< body > Section

Description:
Google Tag Manager for analytics

What to edit:
This is the second part of the Google Tag Manager code provided when you create a new container in the Tag Manager platform.

Description:
Header section of the page

What to edit:
No need to edit, the menu section from the file [includes/menu.html] will be loaded here, upon page load via JavaScript.

Description:
Page title and breadcrumb section

What to edit:
When you create a new page, you need to edit the page title and the breadcrumbs.
If you're creating a homepage you may want to replace this entire section with an image slider or a video.

Description:
Footer section of the page

What to edit:
No need to edit, the footer section from the file [includes/footer.html] will be loaded here, upon page load via JavaScript.

Description:
JavaScript files used on the website

What to edit:
Uncomment [bundled.min.js] and remove the other JavaScript files when in production.
The [bundled.min.js] contains a minified version of all the other files.
Never remove the [scripts.js] file.

Description:
The main website JavaScript file.

/*============================================== On load inits ===============================================*/ $(window).on('load', function () {

What to edit:
This file is also commented for better understanding and edition.

Changelog

November 25, 2025 RELEASE

Version 1.0 - Current Version

Credits

Thank you for choosing the AllTerrain html5 website template.

This website template and its documentation were developed by Impulsive - Webmasters.

Impulsive - Webmasters

If you have any further questions please get in touch with our support team.

Live Preview Purchase