FROLIC

FROLIC - HTML Template for Tour Operators & Travel Agencies


Made with ♥ by GFXPARTNER

Image

FROLIC is a premium HTML template for Travel and Tours based companies or websites. It offers a complete solution starting from searching for tours or trips and ending with checkout and payments. We’ve designed each and every page needed to complete the entire booking process in a modern and intuitive way to maximize user experience. All the sections in the HTML files are properly commented and named which makes it very easy to find, change or customize any text, images, icons or anything else for that matter.

Thank you for purchasing our template. If you have any questions that are beyond the scope of this help file, please feel free to email via our user page contact form here. Thanks so much!

Markup Markup customization and highlights

This theme is a builted on bootstrap framework with four columns. All of the information within the main content area is nested within a 'section'.

General Markup

The general template structure is the same throughout the template. Here is the general structure.

<!doctype html>
<html lang="en">
<head>
<!-- META TAGS -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Frolic | for Tour Operators & Travel Agencies</title>
<meta name="author" content="GFX Partner">
<meta name="description" content="Frolic | for Tour Operators & Travel Agencies">
<meta name="keywords" content="tour, ice, trip, travel, agency, life, vacation, treking, boat, walking, climbing, transition, svg, html, css">

<!-- SOCIAL MEDIA META -->
<meta property="og:description" content="Frolic | for Tour Operators & Travel Agencies">
<meta property="og:site_name" content="Frolic">
<meta property="og:title" content="Frolic">
<meta property="og:type" content="website">
<meta property="og:url" content="http://www.gfxpartner.com/Frolic">

<!-- TWITTER META -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@Frolic">
<meta name="twitter:creator" content="@Frolic">
<meta name="twitter:title" content="Frolic">
<meta name="twitter:description" content="Frolic | for Tour Operators & Travel Agencies">

<!-- FAVICON FILES -->
<link href="ico/apple-touch-icon-144-precomposed.png" rel="apple-touch-icon" sizes="144x144">
<link href="ico/apple-touch-icon-114-precomposed.png" rel="apple-touch-icon" sizes="114x114">
<link href="ico/apple-touch-icon-72-precomposed.png" rel="apple-touch-icon" sizes="72x72">
<link href="ico/apple-touch-icon-57-precomposed.png" rel="apple-touch-icon">
<link href="ico/favicon.png" rel="shortcut icon">

<!-- CSS FILES -->
<link rel="stylesheet" href="css/animate.min.css">
<link rel="stylesheet" href="css/odometer.min.css">
<link rel="stylesheet" href="css/swiper.min.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
content goes here
</body>
</html>

How to customize hamburger menu

It is very easy to change main color or size of hamburger

/* HAMBURGER MENU */
.menu-btn { width: 44px; height: 44px; float: right; cursor: pointer; position: relative; display: none; }

.menu-btn .menu-circle-wrap { position: absolute; width: 44px; height: 44px; left: 0; top: 0; transition: all 0.3s; }

.menu-btn .menu-circle { position: absolute; width: 44px; height: 44px; left: 0; top: 0; transition: all 0.6s; }

.menu-btn .menu-circle path { fill: none; stroke-width: 2px; stroke: #dad9e0; stroke-dashoffset: 157; stroke-dasharray: 157; transition: all 0.6s; }

.menu-btn.active .menu-circle { -ms-transform: rotate(-135deg); transform: rotate(-135deg); }

.menu-btn.active .menu-circle path { stroke-dashoffset: 0; }

.menu-btn.active:hover .menu-circle-wrap { -ms-transform: scale(0.95); transform: scale(0.95); }

.menu-btn .menu-circle-wrap .wave { position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; border-radius: 50%; -ms-transform: scale(1); transform: scale(1); box-shadow: 0px 0px 0px 0px #5f6a72; opacity: 0; }

.menu-btn .bars { position: absolute; width: 28px; height: 24px; left: 0; top: 0px; right: 0; bottom: 0; margin: auto; }

.menu-btn .bar { position: absolute; width: 100%; height: 2px; background: #ff9019; transition: background 0.2s; }

.menu-btn .b1 { top: 2px; }

.menu-btn .b2 { top: 11px; }

.menu-btn .b3 { top: 20px; }

.menu-btn .b1, .header .menu-btn .b3 { transition: all 0.2s; }

.menu-btn.active .b1.rotated { -ms-transform: translateY(9px) rotate(-135deg); transform: translateY(9px) rotate(-135deg); background: #ff9019; }

.menu-btn.active .b2 { opacity: 0; }

.menu-btn.active .b3.rotated { -ms-transform: translateY(-9px) rotate(-225deg); transform: translateY(-9px) rotate(-225deg); background: #ff9019; }

Change Site Header

Here is the css style for site header.

/* HEADER */
.header{ width: 100%; position: absolute; left: 0; top: -100%; z-index: 5; padding: 30px 100px; opacity: 0;}
.header{-webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transform:all 1s ease; transition: all 1s ease; }
.header .logo{float: left; margin-right: 20px;}
.header .logo img{ width: 35px;}
.header .phone{float: left; color: #fff; line-height: 32px; font-family: "Fjalla One";}
.header .language{ float: right; margin-right: 30px; margin-bottom: 0;}
.header .language li{ float: left; list-style: none; margin: 0; margin-left: 20px; font-family: "Fjalla One";}
.header .language li a{float: left; color: #fff; line-height: 35px;}
.header .language li a:hover{text-decoration: none; opacity: 0.8;}
.header .hamburger{float: right; margin-top: -5px;}
.header .equalizer{float: right; margin-top: 5px; margin-right: 20px;}
.overflow-hidden .header .logo img{-webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1);}




/* DROPDOWN */
.hamburger-navigation li:hover ul{display: block;}
.hamburger-navigation li ul{ width: 100%; float: left; margin: 0; padding: 0; text-align: center; display: none;}
.hamburger-navigation li ul li{width: auto; float: none; display: inline-block; padding: 0; margin: 0; position: relative;}
.hamburger-navigation li ul li:after{content: ""; width: 6px; height: 6px; background: #fff; position: absolute; right: -5px; top: 7px; border-radius: 50%;}
.hamburger-navigation li ul li:last-child:after{display: none;}
.hamburger-navigation li ul li a{font-size: 15px; padding: 0 10px;}

Edit loading and page transition

Here is the css style for loading elements and classes.

/* PAGE TRANSITION */
.transition-overlay{ width:100%; height:100%; position:fixed; left:0; top:0; background:#F50C19; z-index:99999; opacity:0; visibility:hidden;}
.transition-overlay{ -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; -ms-transition: all 0.5s ease; transition: all 0.5s ease;}
.transition-overlay.show-me{ opacity:1; visibility:visible;}




/* PRELOADER */
.preloader{ width: 100%; height: 100%; position: fixed; left: 0; top: 0; z-index: 99; background:#f50c1a; }
.preloader{-webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -ms-transform:all 0.4s ease; transition: all 0.4s ease;  }
.preloader *{-webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -ms-transform:all 0.4s ease; transition: all 0.4s ease;}
.preloader img{ width: 80px; height: 80px; position: absolute; left: 50%; top:50%; margin-left: -40px; margin-top: -40px; z-index: 4; border-radius: 50%; padding: 10px; background: #fff;}




/* PAGE LOADED */
.page-loaded .preloader{ top: -100%; transition-delay: 0.60s;}
.page-loaded .preloader img{ opacity: 0; margin-top: -120px; transition-delay: 0.30s;}
.page-loaded .header{top: 0; opacity: 1; transition-delay: 0.6s;}
.page-loaded .slider{transform: translateY(0); transition-delay: 0.6s; opacity: 1;}
.page-loaded .int-hero .inner h2{transform: translateY(0); transition-delay: 0.6s; opacity: 1;}

Styles Styles customization and highlights

Stylesheets

Here's a list of the stylesheet files I'm using with this template, you can find more information opening each file:

File Name Description
bootstrap.min.css Detault bootstrap css file
datepicker.css Select date css file
flaticon.css Flat font icons
font-awesome.min.css Font Awesome font icons
jquery.fancybox.css Litebox plug-in css
odometer.css Counter for odometer
owl.carousel.min.css OWL Carousel plug-in css
style.css Template main css

Table of contents

The second file contains all of the specific stylings for the page. The file is separated into sections using:

===== TABLE OF CONTENTS =====

	1. 	Google Fonts
	2.	Body
	3.	Link
	4.	Site Button
	5.	Headlines
	6.	BG Colors
	7.	Preloader
	8.	Customized Odometer
	9.	Hamburger Menu
	10.	Accordion
	11.	Search Box
	12.	Section Title
	13.	Navbar
	14.	Header Internal Pages
	15.	Header Denmark
	16.	Header Norway
	17.	Header Finland
	18.	Header Sweden
	19.	Header Iceland
	20.	Find Advanture
	21.	About Us
	22.	About Us Video
	23.	Our History
	24.	Milestones
	25.	Our Team
	26.	Our Guides
	27.	Blog
	28.	Subscribe
	29.	Popular Tours
	30.	Popular Destinations
	31.	Adventure Activities
	32.	Reviews
	33.	Recent Blog
	34.	Related Blog
	35.	Checkout Header
	36.	Steps
	37.	Checkout
	38.	Tours Header
	39.	Related Tours
	40.	Tours
	41.	Tour Single
	42.	Tabs
	43.	Attractions
	44.	Quote
	45. Contact
	46.	Our Offices
	47.	Contact Form
	48. Footer
	49.	Responsive Medium Fixes
	50.	Responsive Tablet Fixes
	51.	Responsive Mobile Fixes

JavaScript JavaScript customization and highlights

JavaScript Files

This is the list of all the jquery files are we used for our theme.

Tag Description
bootstrap-datepicker.min.js Datepicker jQuery
bootstrap-min.js Bootstrap min
google-maps.js Customized Google Maps
instagram.js Instagram API plugin
isotope.js Masonry grid jquery
jquery.dateFormat.js Date format jQuery file
jquery.fancybox.js Litebox jQuery
jquery.min.js jQuery library
jquery.stellar.js Parallax backgrounds - elements
npm.js Bootstrap plug-in
odometer.min.js Counter plugin
owl.carousel.min.js Carousel plugin
scripts.js All the plug-ins initializing

Equalizer

If you want to change the equalizer, open up the file scripts.js and change the following code: 

	// EQUALIZER TOGGLE
			var source = "http://GFX Partner.net/Frolic/audio/audio.mp3";
			var audio = new Audio(); // use the constructor in JavaScript, just easier that way
			audio.addEventListener("load", function() {
			  audio.play();
			}, true);
			audio.src = source;
			audio.autoplay = true;
			audio.volume = 0.2;

			$('.equalizer').click();
			var playing = true;
			$('.equalizer').click(function() {
				if (playing == false) {
			  audio.play();
					playing = true;

				} else {
					audio.pause();
					playing = false;
				}
			});

	// EQUALIZER
			function randomBetween(range) {
				var min = range[0],
					max = range[1];
				if (min < 0) {
					return min + Math.random() * (Math.abs(min)+max);
				}else {
					return min + Math.random() * max;
				}
			}

			$.fn.equalizerAnimation = function(speed, barsHeight){
				var $equalizer = $(this);
				setInterval(function(){
					$equalizer.find('span').each(function(i){
					  $(this).css({ height:randomBetween(barsHeight[i])+'px' });
					});
				},speed);
				$equalizer.on('click',function(){
					$equalizer.toggleClass('paused');
				});
			}

			var barsHeight = [
			  [2, 10],
			  [5, 14],
			  [11, 8],
			  [4, 18],
			  [8, 3]
			];
			$('.equalizer').equalizerAnimation(180, barsHeight);

Counter

If you want to change values of counter, open up the file scripts.ks and change the numbers.

// COUNTER
			if (!document.getElementById("counter")) {
			}
			else {

			var lastWasLower = false;
				$(document).scroll(function(){

				var p = $( "#counter" );
				var position = p.position();
				var position2 = position.top;

				if ($(document).scrollTop() > position2-300){
				if (!lastWasLower)
					$('#1').html('21');
					$('#2').html('37');
					$('#3').html('78');

				lastWasLower = true;
					} else {
				lastWasLower = false;
				}
				});
			};

Photoshop Files Photoshop customization and highlights

There is no included psd file with this item:

Credits Files Some of your credits and sources

I've used the following images, icons or other files as listed.

JavaScript

  1. Revolution Slider
  2. Bootstrap
  3. Isotope
  4. Fancybox
  5. Odometer
  6. Swiper Carousel
  7. Stellar Parallax

Images

  1. http://www.istockphoto.com/ — Some of images we used from here
  2. http://www.shutterstock.com/ — Some of images we used from here

Once again, thanks for purchasing this template and if you have any questions relating to this theme. No guarantees, but we'll do our best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.