Home page documentation

INDEX-1.HTML

SCREEN

Home page includes following sections:

SECTION ABOVE MENU (email, phone, language flags, social media icons)

If you would like to change information above menu, please open index.html file by any html editor and find following code below:

LOGO

If you would like to change logo, please open index.html file by any html editor and find following code below:

MENU / SUB-MENU

If you would like to change menu, please open index.html file by any html editor and find following code below:

<div class="navbar-collapse navbar-collapse_ collapse">
                        <ul class="nav navbar-nav sf-menu clearfix">
                            <li class="sub-menu sub-menu-1 active"><a href="#">Home<em></em></a>
                                <ul>
                                    <li><a href="index.html">Home Version 1</a></li>
                                    <li><a href="index-1.html">Home Version 2 (video)</a></li>
                                </ul>
                            </li>
                            <li><a href="about.html">About Us</a></li>
                            <li><a href="gallery.html">Gallery</a></li>
                            <li class="sub-menu sub-menu-1"><a href="#">Pages<em></em></a>
                                <ul>
                                    <li><a href="flights.html">Flights</a>
                                        <ul>
                                            <li><a href="search-flights.html">Search Flights</a></li>
                                            <li><a href="booking-flights.html">Booking Flights</a></li>
                                            <li><a href="booking-flights-page.html">Flights Checkout</a></li>
                                        </ul>
                                    </li>

<li><a href="hotels.html">Hotels</a>
                                        <ul>
                                            <li><a href="search-hotel.html">Search Hotels</a></li>
                                            <li><a href="booking-hotel.html">Booking Hotel</a></li>
                                            <li><a href="booking-hotel-page.html">Hotel Reservation</a></li>
                                        </ul>
                                    </li>

<li><a href="cars.html">Rent a Car</a>
                                        <ul>
                                            <li><a href="search-cars.html">Search Cars</a></li>
                                            <li><a href="booking-cars.html">Booking Car</a></li>
                                            <li><a href="booking-cars-page.html">Car Reservation</a></li>
                                        </ul>
                                    </li>
                                    <li><a href="cruises.html">Cruises</a>
                                        <ul>
                                            <li><a href="search-cruise.html">Search Cruise</a></li>
                                            <li><a href="booking-cruise.html">Booking Cruise</a></li>
                                            <li><a href="booking-cruise-page.html">Cruise Checkout</a></li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>

<li class="sub-menu sub-menu-1"><a href="#">Blog<em></em></a>
                                <ul>
                                    <li><a href="blog.html">Right Blog</a></li>
                                    <li><a href="left-blog.html">Left Blog</a></li>
                                    <li><a href="post.html">Right Post</a></li>
                                    <li><a href="left-post.html">Left Post</a></li>
                                    <li><a href="full-post.html">Full Post</a></li>
                                </ul>
                            </li>
                            <li><a href="contacts.html">Contacts</a></li>
                        </ul>
                    </div>

VIDEO BACKGROUND SECTION

If you would like to change background video, Please upload your background video file into the "video" folder and instead of this: 20576888.mp4 write your beckround video file name. Please see code below:

BOOKING FORM - SECTION

If you would like to change Booking form, please open index.html file by any html editor and find following code below:

<ul>
<li class="active flights"><a href="#tabs-1">Flights</a></li>
<li class="hotels"><a href="#tabs-2">Hotels</a></li>
<li class="cars"><a href="#tabs-3">Cars</a></li>
<li class="cruises"><a href="#tabs-4">Cruises</a></li>
</ul>

</div>
<div class="tabs_content tabs1_content">

<div id="tabs-1">
<form action="javascript:;" class="form1">
<div class="row">
<div class="col-sm-4 col-md-2">
<div class="select1_wrapper">
<label>Flying from:</label>
<div class="select1_inner">
<select class="select2 select" style="width: 100%">
<option value="1">City or Airport</option>
<option value="2">Alaska</option>
<option value="3">Bahamas</option>
<option value="4">Bermuda</option>
<option value="5">Canada</option>
<option value="6">Caribbean</option>
<option value="7">Europe</option>
<option value="8">Hawaii</option>
</select>
</div>
</div>
</div>
<div class="col-sm-4 col-md-2">
<div class="select1_wrapper">
<label>To:</label>
<div class="select1_inner">
<select class="select2 select" style="width: 100%">
<option value="1">City or Airport</option>
<option value="2">Alaska</option>
<option value="3">Bahamas</option>
<option value="4">Bermuda</option>
<option value="5">Canada</option>
<option value="6">Caribbean</option>
<option value="7">Europe</option>
<option value="8">Hawaii</option>
</select>
</div>
</div>
</div>
<div class="col-sm-4 col-md-2">
<div class="input1_wrapper">
<label>Departing:</label>
<div class="input1_inner">
<input type="text" class="input datepicker" value="Mm/Dd/Yy">
</div>
</div>
</div>
<div class="col-sm-4 col-md-2">
<div class="input1_wrapper">
<label>Returning:</label>
<div class="input1_inner">
<input type="text" class="input datepicker" value="Mm/Dd/Yy">
</div>
</div>
</div>
<div class="col-sm-4 col-md-1">
<div class="select1_wrapper">
<label>Adult:</label>
<div class="select1_inner">
<select class="select2 select select3" style="width: 100%">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select>
</div>
</div>
</div>
<div class="col-sm-4 col-md-1">
<div class="select1_wrapper">
<label>Child:</label>
<div class="select1_inner">
<select class="select2 select select3" style="width: 100%">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select>
</div>
</div>
</div>
<div class="col-sm-4 col-md-2">
<div class="button1_wrapper">
<button type="submit" class="btn-default btn-form1-submit">Search</button>
</div>
</div>
</div>
</form>
</div>
<div id="tabs-2">
<form action="javascript:;" class="form1">
<div class="row">
<div class="col-sm-4 col-md-4">
<div class="select1_wrapper">
<label>City or Hotel Name:</label>
<div class="select1_inner">
<select class="select2 select" style="width: 100%">
<option value="1">Enter a destination or hotel name</option>
<option value="2">Lorem ipsum dolor sit amet</option>
<option value="3">Duis autem vel eum</option>
<option value="4">Ut wisi enim ad minim veniam</option>
<option value="5">Nam liber tempor cum</option>
<option value="6">At vero eos et accusam et</option>
<option value="7">Consetetur sadipscing elitr</option>
<option value="8">Sed diam nonumy</option>
</select>
</div>
</div>
</div>
<div class="col-sm-4 col-md-2">
<div class="input1_wrapper">
<label>Check-In:</label>
<div class="input1_inner">
<input type="text" class="input datepicker" value="Mm/Dd/Yy">
</div>
</div>
</div>
<div class="col-sm-4 col-md-2">
<div class="input1_wrapper">
<label>Check-Out:</label>
<div class="input1_inner">
<input type="text" class="input datepicker" value="Mm/Dd/Yy">
</div>
</div>
</div>
<div class="col-sm-4 col-md-2">
<div class="select1_wrapper">
<label>Adult:</label>
<div class="select1_inner">
<select class="select2 select" style="width: 100%">
<option value="1">Room  for  1  adult</option>
<option value="2">Room  for  2  adult</option>
<option value="3">Room  for  3  adult</option>
<option value="4">Room  for  4  adult</option>
<option value="5">Room  for  5  adult</option>
<option value="6">Room  for  6  adult</option>
<option value="7">Room  for  7  adult</option>
<option value="8">Room  for  8  adult</option>
</select>
</div>
</div>
</div>
<div class="col-sm-4 col-md-2">
<div class="button1_wrapper">
<button type="submit" class="btn-default btn-form1-submit">Search</button>
</div>
</div>
</div>
</form>
</div>
<div id="tabs-3">
<form action="javascript:;" class="form1">
<div class="row">
<div class="col-sm-4 col-md-2">
<div class="select1_wrapper">
<label>Country:</label>
<div class="select1_inner">
<select class="select2 select" style="width: 100%">
<option value="1">Please Select</option>
<option value="2">Alaska</option>
<option value="3">Bahamas</option>
<option value="4">Bermuda</option>
<option value="5">Canada</option>
<option value="6">Caribbean</option>
<option value="7">Europe</option>
<option value="8">Hawaii</option>
</select>
</div>
</div>
</div>
<div class="col-sm-4 col-md-2">
<div class="select1_wrapper">
<label>City:</label>
<div class="select1_inner">
<select class="select2 select" style="width: 100%">
<option value="1">Please Select</option>
<option value="2">Alaska</option>
<option value="3">Bahamas</option>
<option value="4">Bermuda</option>
<option value="5">Canada</option>
<option value="6">Caribbean</option>
<option value="7">Europe</option>
<option value="8">Hawaii</option>
</select>
</div>
</div>
</div>
<div class="col-sm-4 col-md-2">
<div class="select1_wrapper">
<label>Location:</label>
<div class="select1_inner">
<select class="select2 select" style="width: 100%">
<option value="1">Please Select</option>
<option value="2">Alaska</option>
<option value="3">Bahamas</option>
<option value="4">Bermuda</option>
<option value="5">Canada</option>
<option value="6">Caribbean</option>
<option value="7">Europe</option>
<option value="8">Hawaii</option>
</select>
</div>
</div>
</div>
<div class="col-sm-4 col-md-2">
<div class="input1_wrapper">
<label>Pick up Date:</label>
<div class="input1_inner">
<input type="text" class="input datepicker" value="Mm/Dd/Yy">
</div>
</div>
</div>
<div class="col-sm-4 col-md-2">
<div class="input1_wrapper">
<label>Drop off Date:</label>
<div class="input1_inner">
<input type="text" class="input datepicker" value="Mm/Dd/Yy">
</div>
</div>
</div>

<div class="col-sm-4 col-md-2">
<div class="button1_wrapper">
<button type="submit" class="btn-default btn-form1-submit">Search</button>
</div>
</div>
</div>
</form>
</div>
<div id="tabs-4">
<form action="javascript:;" class="form1">
<div class="row">
<div class="col-sm-4 col-md-2">
<div class="select1_wrapper">
<label>Sail To:</label>
<div class="select1_inner">
<select class="select2 select" style="width: 100%">
<option value="1">All destinations</option>
<option value="2">Alaska</option>
<option value="3">Bahamas</option>
<option value="4">Bermuda</option>
<option value="5">Canada</option>
<option value="6">Caribbean</option>
<option value="7">Europe</option>
<option value="8">Hawaii</option>
</select>
</div>
</div>
</div>
<div class="col-sm-4 col-md-2">
<div class="select1_wrapper">
<label>Sail From:</label>
<div class="select1_inner">
<select class="select2 select" style="width: 100%">
<option value="1">All ports</option>
<option value="2">Alaska</option>
<option value="3">Bahamas</option>
<option value="4">Bermuda</option>
<option value="5">Canada</option>
<option value="6">Caribbean</option>
<option value="7">Europe</option>
<option value="8">Hawaii</option>
</select>
</div>
</div>
</div>

<div class="col-sm-4 col-md-2">
<div class="input1_wrapper">
<label>Start Date:</label>
<div class="input1_inner">
<input type="text" class="input datepicker" value="From any month">
</div>
</div>
</div>
<div class="col-sm-4 col-md-2">
<div class="input1_wrapper">
<label>End of Date:</label>
<div class="input1_inner">
<input type="text" class="input datepicker" value="To any month">
</div>
</div>
</div>
<div class="col-sm-4 col-md-2">
<div class="select1_wrapper">
<label>Cruise Ship:</label>
<div class="select1_inner">
<select class="select2 select" style="width: 100%">
<option value="1">All Ships</option>
<option value="2">Alaska</option>
<option value="3">Bahamas</option>
<option value="4">Bermuda</option>
<option value="5">Canada</option>
<option value="6">Caribbean</option>
<option value="7">Europe</option>
<option value="8">Hawaii</option>
</select>
</div>
</div>
</div>

<div class="col-sm-4 col-md-2">
<div class="button1_wrapper">
<button type="submit" class="btn-default btn-form1-submit">Search</button>
</div>
</div>
</div>
</form>
</div>

</div>
</div>
</div>
</div>
</div>

PARALLAX - SECTION

For changeing parallax background image and content, please create image with this size 1920px x 1112px, then open css/style.css file and instead of this: http://placehold.it/1920x1112 insert your image's address like: images/yourimage.jpg

For changeing parallax content, please find code below:

POPULAR CRUISES - SECTION

For changeing images and content, please open index.html file and find code below:

<h2 class="animated" data-animation="fadeInUp" data-animation-delay="100">POPULAR CRUISES</h2>

<div class="title1 animated" data-animation="fadeInUp" data-animation-delay="200">Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod <br>tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>

<div id="popular_wrapper" class="animated" data-animation="fadeIn" data-animation-delay="300">
<div id="popular_inner">
<div class="">
<div id="popular">
<div class="">
<div class="carousel-box">
<div class="inner">
<div class="carousel main">
<ul>
<li>
<div class="popular">
<div class="popular_inner">
<figure>
<img src="http://placehold.it/370x232" alt="" class="img-responsive">
<div class="over">
<div class="v1">Bahamas <span>17 Deal Offers</span></div>
<div class="v2">Lorem ipsum dolor sit amet, concateus.</div>
</div>
</figure>
<div class="caption">
<div class="txt1"><span>Bahamas</span> 7 Night Tour</div>
<div class="txt2">Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming.</div>
<div class="txt3 clearfix">
<div class="left_side">
<div class="stars1">
<img src="images/star1.png" alt="">
<img src="images/star1.png" alt="">
<img src="images/star1.png" alt="">
<img src="images/star1.png" alt="">
<img src="images/star2.png" alt="">
</div>
<div class="nums">- 18 Reviews</div>
</div>
<div class="right_side"><a href="#" class="btn-default btn1">See All</a></div>
</div>
</div>
</div>
</div>
</li>
<li>
<div class="popular">
<div class="popular_inner">
<figure>
<img src="http://placehold.it/370x232" alt="" class="img-responsive">
<div class="over">
<div class="v1">Mediterranean <span>17 Deal Offers</span></div>
<div class="v2">Lorem ipsum dolor sit amet, concateus.</div>
</div>
</figure>
<div class="caption">
<div class="txt1"><span>Mediterranean</span> 18 Night Tour</div>
<div class="txt2">Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming.</div>
<div class="txt3 clearfix">
<div class="left_side">
<div class="stars1">
<img src="images/star1.png" alt="">
<img src="images/star1.png" alt="">
<img src="images/star1.png" alt="">
<img src="images/star1.png" alt="">
<img src="images/star1.png" alt="">
</div>
<div class="nums">- 168 Reviews</div>
</div>
<div class="right_side"><a href="#" class="btn-default btn1">See All</a></div>
</div>
</div>
</div>
</div>
</li>
<li>
<div class="popular">
<div class="popular_inner">
<figure>
<img src="http://placehold.it/370x232" alt="" class="img-responsive">
<div class="over">
<div class="v1">Greece <span>17 Deal Offers</span></div>
<div class="v2">Lorem ipsum dolor sit amet, concateus.</div>
</div>
</figure>
<div class="caption">
<div class="txt1"><span>Greece</span> 6 Night Tour</div>
<div class="txt2">Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming.</div>
<div class="txt3 clearfix">
<div class="left_side">
<div class="stars1">
<img src="images/star1.png" alt="">
<img src="images/star1.png" alt="">
<img src="images/star1.png" alt="">
<img src="images/star1.png" alt="">
<img src="images/star2.png" alt="">
</div>
<div class="nums">- 16 Reviews</div>
</div>
<div class="right_side"><a href="#" class="btn-default btn1">See All</a></div>
</div>
</div>
</div>
</div>
</li>
<li>
<div class="popular">
<div class="popular_inner">
<figure>
<img src="http://placehold.it/370x232" alt="" class="img-responsive">
<div class="over">
<div class="v1">Bahamas <span>17 Deal Offers</span></div>
<div class="v2">Lorem ipsum dolor sit amet, concateus.</div>
</div>
</figure>
<div class="caption">
<div class="txt1"><span>Bahamas</span> 7 Night Tour</div>
<div class="txt2">Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming.</div>
<div class="txt3 clearfix">
<div class="left_side">
<div class="stars1">
<img src="images/star1.png" alt="">
<img src="images/star1.png" alt="">
<img src="images/star1.png" alt="">
<img src="images/star1.png" alt="">
<img src="images/star2.png" alt="">
</div>
<div class="nums">- 18 Reviews</div>
</div>
<div class="right_side"><a href="#" class="btn-default btn1">See All</a></div>
</div>
</div>
</div>
</div>
</li>
<li>
<div class="popular">
<div class="popular_inner">
<figure>
<img src="http://placehold.it/370x232" alt="" class="img-responsive">
<div class="over">
<div class="v1">Mediterranean <span>17 Deal Offers</span></div>
<div class="v2">Lorem ipsum dolor sit amet, concateus.</div>
</div>
</figure>
<div class="caption">
<div class="txt1"><span>Mediterranean</span> 18 Night Tour</div>
<div class="txt2">Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming.</div>
<div class="txt3 clearfix">
<div class="left_side">
<div class="stars1">
<img src="images/star1.png" alt="">
<img src="images/star1.png" alt="">
<img src="images/star1.png" alt="">
<img src="images/star1.png" alt="">
<img src="images/star1.png" alt="">
</div>
<div class="nums">- 168 Reviews</div>
</div>
<div class="right_side"><a href="#" class="btn-default btn1">See All</a></div>
</div>
</div>
</div>
</div>
</li>
<li>
<div class="popular">
<div class="popular_inner">
<figure>
<img src="http://placehold.it/370x232" alt="" class="img-responsive">
<div class="over">
<div class="v1">Greece <span>17 Deal Offers</span></div>
<div class="v2">Lorem ipsum dolor sit amet, concateus.</div>
</div>
</figure>
<div class="caption">
<div class="txt1"><span>Greece</span> 6 Night Tour</div>
<div class="txt2">Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming.</div>
<div class="txt3 clearfix">
<div class="left_side">
<div class="stars1">
<img src="images/star1.png" alt="">
<img src="images/star1.png" alt="">
<img src="images/star1.png" alt="">
<img src="images/star1.png" alt="">
<img src="images/star2.png" alt="">
</div>
<div class="nums">- 16 Reviews</div>
</div>
<div class="right_side"><a href="#" class="btn-default btn1">See All</a></div>
</div>
</div>
</div>
</div>
</li>

</ul>
</div>
</div>
</div>
</div>
<div class="popular_pagination"></div>
</div>
</div>
</div>
</div>
</div>
</div>

HAPPY CUSTOMERS - SECTION

For editing HAPPY CUSTOMERS section, please find code below:

<div class="col-sm-12 col-md-6 col-md-push-6">
<div class="content">
<div class="txt1 animated" data-animation="fadeIn" data-animation-delay="100">HAPPY CUSTOMERS</div>
<div class="txt2 animated" data-animation="fadeIn" data-animation-delay="150">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, set amet. </div>
<div class="txt3 animated" data-animation="fadeIn" data-animation-delay="200">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh oui-
sod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit dolore magna aliquam erat voutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit..
</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euisod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit.
</p>
</div>

<div class="distance1 animated" data-animation="fadeInUp" data-animation-delay="0">
<div class="txt">Flights</div>
<div class="bg">
<div class="animated-distance" data-num="94" data-duration="1300" data-animation-delay="0"><span></span></div>
</div>
</div>

<div class="distance1 animated" data-animation="fadeInUp" data-animation-delay="100">
<div class="txt">Hotels</div>
<div class="bg">
<div class="animated-distance" data-num="87" data-duration="1300" data-animation-delay="100"><span></span></div>
</div>
</div>

<div class="distance1 animated" data-animation="fadeInUp" data-animation-delay="300">
<div class="txt">Cruises</div>
<div class="bg">
<div class="animated-distance" data-num="51" data-duration="1300" data-animation-delay="300"><span></span></div>
</div>
</div>

</div>
</div>

PARTNERS - SECTION

If you would like to change partner's logo images, create 170x95 size images and add instead of these: http://placehold.it/170x95

</div>
</div>
</div>

FOOTER - SECTION

If you would like to change Footer's content, please find in the indes.html file following code below:

<div class="bot1_wrapper">
<div class="container">
<div class="row">
<div class="col-sm-3">
<div class="logo2_wrapper">
<a href="index.html" class="logo2">
<img src="images/logo2.png" alt="" class="img-responsive">
</a>
</div>
<p>
Nam liber tempor cum soluta nobis option congue nihil imperdiet doming id quod mazim. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna.
</p>
<p>
<a href="#" class="btn-default btn2">Read More</a>
</p>
</div>
<div class="col-sm-3">
<div class="bot1_title">Travel Specialists</div>
<ul class="ul1">
<li><a href="#">First Class Flights</a></li>
<li><a href="#">Accessible Travel</a></li>
<li><a href="#">Amazing Cruises</a></li>
</ul>

</div>
<div class="col-sm-3">
<div class="bot1_title">Our Twitter</div>
<div class="twits1">
<div class="twit1">
<a href="#"> @travel</a> Lorem ipsum dolor sit amet, consectetuer adipiscing elit
<div class="date">5 minutes ago</div>
</div>
<div class="twit1">
<a href="#">@leo</a> Nam liber tempor cum soluta nobis option congue nihil imperdiet doming id quod mazim.
<div class="date">2 days ago</div>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="bot1_title">Newsletter</div>
<div class="newsletter_block">
<div class="txt1">Inspiration, ideas, news and your feedback.</div>
<div class="newsletter-wrapper clearfix">
<form class="newsletter" action="javascript:;">
<input type="text" name="s" value='Email Address' onBlur="if(this.value=='') this.value='Email Address'" onFocus="if(this.value =='Email Address' ) this.value=''">
<a href="#" class="btn-default btn3">SUBMIT</a>
</form>
</div>
</div>
<div class="phone2">1-917-338-6831</div>
<div class="support1"><a href="#">support@templates-support.com</a></div>
</div>
</div>
</div>
</div>

<div class="bot2_wrapper">
<div class="container">
<div class="left_side">
Copyright © 2017 <strong>MECOVACHE</strong>   <span>|</span>   <a href="#">Privacy Policy</a>   <span>|</span>
<a href="#">About Us</a>   <span>|</span>   <a href="#">FAQ</a>   <span>|</span>   <a href="#">Contact Support</a>
</div>
<div class="right_side">Designed by <strong>MECOVACHE</strong></div>
</div>
</div>

BOOKING TRAVEL BOOTSTRAP THEME