Trips Booking HTML/CSS3 Template Documentation

Thank you for purchasing.

• Created: 18 August 2013
• Last Update: 18 August 2013

Compatible with  Internet Explorer 9, Internet Explorer 10, Mozilla Firefox, Google Chrome, Opera, Safari

FULLY RESPONSIVE

Features

• 4 Different type of homepages
• Different type of backgrounds for Fixed Homepage
• jQuery image slider (Nivo Slider)
• jQuery modalbox (Codrops)
• jQuery image gallery (Fancybox)
• jQuery image gallery (Ad Gallery)
• jQuery scroll for selects (jScrollPane) & MouseWheel (optional)
• Clean HTML and CSS code
• SEO Friendly

Pages

• Main Homepage
• Light Homepage
• Dark Homepage
• Fixed Background Homepage
• Booking Details Page
• Booking Information Page
• Payment Information Page
• Booking Confirmation Page
• Flights
• Hotels
• Deals
• Contact
• 404 Error Page

Documentation

• Well Documented
• Easy to use HTML Documentation Page
• Commented HTML Pages
• Commented CSS Pages
• Commented JS Pages

Fonts

• Open Sans 300, 400, 600, 700, 800 from Google Fonts

Just find this section at the top of the html document and change it's src to location of your logo.

<div class="logo"><a href="index.html"><img src="images/logo.png" /></a></div>

Search for the code:

<nav id="topNav">
            <ul>
                <li><a href="index.html">Home</a>
                    <ul class="submenu">
                        <li><a href="index.html">Main Homepage</a></li>
                        <li><a href="index-2.html">Light Homepage</a></li>
                        <li><a href="index-3.html">Dark Homepage</a></li>
                        <li><a href="index-4.html">Fixed Background Homepage</a></li>
                        <li><a href="404.html">404 Error Page</a></li>
                    </ul>
                </li>
                <li><a href="#">Booking</a>
                    <ul class="submenu">
                        <li><a href="bookdetail.html">Booking Details Page</a></li>
                        <li><a href="bookinfo.html">Booking Information Page</a></li>
                        <li><a href="bookpay.html">Payment Information Page</a></li>
                        <li><a href="bookconfirm.html">Booking Confirmation Page</a></li>
                    </ul>
                </li>
                <li><a href="flights.html">Flights</a></li>
                <li><a href="hotels.html">Hotels</a></li>
                <li><a href="deals.html">Deals</a></li>
                <li class="last"><a class="md-trigger" data-modal="modal-login" id="signin" href="#">Sign in</a></li>
            </ul>
    </nav>

You can add new item on navigation menu with simple code like this:

<li><a href="index.html">Home</a></li>

For add a subcategory with dropdown menu just add:

<ul class="submenu">
            <li><a href="index.html">Main Homepage</a></li>
</ul>

Sure for remove a item from navigation you simple need to delete:

<li><a href="index.html">Home</a></li>

If you want to change slider images just look for this code:

<div id="slider" class="nivoSlider">
                <img alt="slide1" src="images/1920x730.gif" data-thumb="images/1920x730.gif" data-transition="fade" />
 </div>

You need to change src and data-thumb for it with your source image.

For change a special offer box you need to find this code:

<div class="box" id="specialbox1">
                        <div class="image"><a class="fancybox" href="images/284x131.gif" data-fancybox-group="gallery"><div class="specialhover"><img src="images/specialh.png" /></div><img src="images/special1.jpg" /></a></div>
                        <a href="bookdetail.html"><div class="title">Winter Beach <span class="colored">%25</span> Off</div></a>
                    </div>

Modify href source for lightbox gallery and src from img for the image, also title and link can be modified.

Find this code:

<div class="box" id="topbox1">
                        <div class="image"><div class="travelhover"><img src="images/travelh.png" /></div><img src="images/284x131.gif" /></div>
                        <div class="title"><a href="bookdetail.html">Arnus Hotel</a><span class="count">2 Nights</span></div>
                        <div class="ratings">
                            <ul class="star-rating">
                              <li><a href="#" class="one-star">1</a></li>
                              <li><a href="#" class="two-stars">2</a></li>
                              <li><a href="#" class="three-stars">3</a></li>
                              <li><a href="#" class="four-stars">4</a></li>
                              <li><a href="#" class="five-stars">5</a></li>
                            </ul>
                            <span class="address">70 Pier Street, Perth</span>
                        </div>
                        <div class="desc">Lorem Ipsum is simply dummy text of the printing industry took a galley ...  <span class="more"><a href="#">More</a></span></div>
                        <div class="rooms">Standard Room<span class="left"><a href="#">2 Rooms Left</a></span></div>
                        <div class="viewmap"><a class="md-trigger" data-modal="modal-viewmap1" href="#content">View on Map</a></div>
                        <div class="booknow">
                            <div class="price"><span class="dollar">$</span>132,00</div>
                            <div class="book"><input class="bookbtn" type="submit" name="booknow" value="Book Now" /></div>
                            <div class="clear"></div>
                        </div>
                    </div>

For change image of this find "images/284x131.gif" and change it.

For change title of box find Arnus Hotel also his href to change redirect link (where is span class="count" you can put how many time you want)

To change address find <span class="address">70 Pier Street, Perth</span> and change 70 Pier Street, Perth with what you want.

To change description find <div class="desc">Lorem Ipsum is simply dummy text of the printing industry took a galley ... and change it.

To change room type and count find <div class="rooms">Standard Room<span class="left"><a href="#">2 Rooms Left</a></span></div> and change it.

For the price you need to find code <div class="price"><span class="dollar">$</span>132,00</div> and change 132,00 with what price you want.

Also if you want to put it a special offer box put after <div class="box" id="topbox1"> <div class="special"></div> and for the latest deals put <div class="deals"></div>

To change filter settings you need to open main.js from js folder and edit this:

For price range find code:

$("#price-range").slider({ range: true, min: 0, max: 2000, values: [ 200, 1500 ], step: 50

and change min for minimum value to start, max for maximum value to reach. Values also are default settings to show (200, 1500). Step "50" is how many steps you want to jump to another.

For star range find code:

$("#star-range").slider({ range: "min", value: 3, min: 1, max: 5

change min for minimum value and max for maxmimum value.Value 3 is default setting.

For user range find code:

$("#user-range").slider({ range: "min", value: 30, max: 50, step: 1

is idem to star range but with other values

For discount range find code:

$( "#discount-range" ).slider({ range: "min", value: 60, max: 100, step: 1

same thing, with other values.

Function resetall (find this code)

function resetall() {
    var $pslider = $("#price-range");
    $pslider.slider("values", 0, 200);
    $pslider.slider("values", 1, 1500);
    var $rslider = $("#star-range");
    $rslider.slider("value", 3);
    var $uslider = $("#user-range");
    $uslider.slider("value", 30);
    var $dslider = $("#discount-range");
    $dslider.slider("value", 60);
    $( "#pr1" ).val( "$ " + $( "#price-range" ).slider( "values", 0 ) );
    $( "#pr2" ).val( "$ " + $( "#price-range" ).slider( "values", 1 ) );
    $( "#sr" ).val( $( "#star-range" ).slider( "value" ) + " Ratings" );
    $( "#ur" ).val( $( "#user-range" ).slider( "value" ) + " Users" );
    $( "#dr" ).val( $( "#discount-range" ).slider( "value" ) + " %" );
    $('#locmore').slideUp('slow', function() { });
}

Here you can change value for each item in default state when user click on "Reset All" link.

For change star rating find the code:

<div class="ratings"><div class="stars three"></div><div class="starsno">5 Star Ratings</div></div>

and change three with "one, two,  four or five" also starsno for text to display.

For change user rating find the code:

<div class="bullets three"></div>

and change three with "one, two,  four or five".

Go to css folder, find and open home4.css

Search for background: url(../../images/1200x800.gif) no-repeat center fixed;

and change with one of your images for background.