Travelogue

Travelogue Personal and Blog HTML Template


Before we start, lets take a look on the folder structure of the theme. All theme files are placed in the HTML folder.

  1. img - contaning all images for the theme design
  2. js - containing all scripts for the theme
  3. css - containing all CSS files for the theme
  4. fonts - containing all font files for the theme

assets/images/image_1.jpg

 

 

01 - Homepage

This is an HTML theme and doesn't require instalation in the traditional meaning of the word. You only need to place the content (HTML files and the four folders) in your prefered web directory

Keep in mind that the folder structure and file/folder names are important for the correct theme work

General classes: can be used within any html file of the template


/* POSITIONS */

/* Position - relative */
.relative{
    position: relative;
}
/* Position - absolute */
.absolute{
    position: absolute;
}
/* Position - fixed */
.fixed{
    position: fixed;
}



/* FLOATS */

/* Float - left */
.float-left{
    float: left;
}
/* Float - right */
.float-right{
    float: right;
}



/* TEXT ALIGN */

/* Text align - left */
.text-left{
    text-align: left;
}
/* Text align - center */
.text-center{
    text-align: center;
}
/* Text align - right */
.text-right{
    text-align: right;
}
/* Text align - justify */
.text-justify{
    text-align: justify;
}



/* COLUMNS */

/* 10% of the content in width */
.one_ninth{
    width: 10%;
    float: left;
}
/* 20% of the content in width */
.two_eight{
    width: 20%;
    float: left;
}
/* 33.33% of the content in width */
.one_third {
    float: left;
    width: 33.33%;
}
/* 40% of the content in width */
.two_eight{
    width: 40%;
    float: left;
}
/* 50% of the content in width */
.one_half{
    float: left;
    width: 50%;
}
/* 66.66% of the content in width */
.two_third {
    float: left;
    width: 66.66%;
}
/* 70% of the content in width */
.eight_two{
    width: 70%;
    float: left;
}
/* 80% of the content in width */
.eight_two{
    width: 80%;
    float: left;
}
/* 90% of the content in width */
.ninth_one{
    width: 90%;
    float: left;
}


/* CONTENT DIVIDERS */

/* 10px in height */
.divider_10{
    width: 100%;
    clear: both;
    display: block;
    height: 20px;
}
/* 15px in height */
.divider{
    width: 100%;
    clear: both;
    display: block;
    height: 15px;
}
/* 20px in height */
.divider_20{
    width: 100%;
    clear: both;
    display: block;
    height: 20px;
}
/* 30px in height */
.divider_30{
    width: 100%;
    clear: both;
    display: block;
    height: 30px;
}

	

Element name: Tabs

Output

Code


<!DOCTYPE html>
<div class="tabs tabs-style-topline">
	<nav>
		<ul>
			<!-- #1 Tab -->
			<li class="tab-current"><a class="fa fa-code" href="#section-topline-1"><span>First tab</span></a></li>
			<!-- #2 Tab -->
			<li class=""><a class="fa fa-pencil-square-o" href="#section-topline-2"><span>Second tab</span></a></li>
			<!-- #3 Tab -->
			<li class=""><a class="fa fa-heart-o" href="#section-topline-3"><span>Third tab</span></a></li>
			<!-- #4 Tab -->
			<li class=""><a class="fa fa-star-half-o" href="#section-topline-4"><span>Fourth tab</span></a></li>
			<!-- #5 Tab -->
			<li class=""><a class="fa fa-thumbs-o-up" href="#section-topline-5"><span>Fifth tab</span></a></li>
		</ul>
	</nav>
	<div class="content-wrap">
		<!-- Content for tab #1 -->
		<section id="section-topline-1" class="content-current">
			<p>Nunc malesuada diam lacus, at maximus felis euismod finibus. Nullam dapibus, magna a tincidunt bibendum, eros quam rhoncus libero, vitae cursus odio eros in diam. Integer sed sodales mi, eget suscipit elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque feugiat consectetur orci, at maximus quam bibendum vitae. Phasellus volutpat magna a fringilla mattis. Phasellus sagittis, sem at laoreet lacinia, eros lectus placerat orci, et sagittis nulla erat ut nunc. </p>
		</section>
		<!-- Content for tab #2 -->
		<section id="section-topline-2" class="">
			<p>Vestibulum mi purus, rhoncus id dolor ac, porttitor euismod quam. Fusce blandit congue diam eu sodales. Phasellus lorem sapien, suscipit et mollis nec, vestibulum at elit. Duis ut rutrum neque. Sed iaculis lobortis pellentesque. Praesent non risus eget libero mattis luctus. Aliquam dignissim accumsan accumsan. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce sagittis pellentesque mauris. </p>
		</section>
		<!-- Content for tab #3 -->
		<section id="section-topline-3" class="">
			<p>Nunc malesuada diam lacus, at maximus felis euismod finibus. Nullam dapibus, magna a tincidunt bibendum, eros quam rhoncus libero, vitae cursus odio eros in diam. Integer sed sodales mi, eget suscipit elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque feugiat consectetur orci, at maximus quam bibendum vitae. Phasellus volutpat magna a fringilla mattis. Phasellus sagittis, sem at laoreet lacinia, eros lectus placerat orci, et sagittis nulla erat ut nunc. </p>
		</section>
		<!-- Content for tab #4 -->
		<section id="section-topline-4" class="">
			<p>Vestibulum mi purus, rhoncus id dolor ac, porttitor euismod quam. Fusce blandit congue diam eu sodales. Phasellus lorem sapien, suscipit et mollis nec, vestibulum at elit. Duis ut rutrum neque. Sed iaculis lobortis pellentesque. Praesent non risus eget libero mattis luctus. Aliquam dignissim accumsan accumsan. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce sagittis pellentesque mauris. </p>	
		</section>
		<!-- Content for tab #5 -->
		<section id="section-topline-5" class="">
			<p>Nunc malesuada diam lacus, at maximus felis euismod finibus. Nullam dapibus, magna a tincidunt bibendum, eros quam rhoncus libero, vitae cursus odio eros in diam. Integer sed sodales mi, eget suscipit elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque feugiat consectetur orci, at maximus quam bibendum vitae. Phasellus volutpat magna a fringilla mattis. Phasellus sagittis, sem at laoreet lacinia, eros lectus placerat orci, et sagittis nulla erat ut nunc. </p>
		</section>
	</div><!-- /content -->
</div>


Element name: Responsive table

Output

Code


<table class="fullwidth">
      <thead>
            <tr>
                  <th class="text-left">Nr</th>
                  <th class="text-left">First Name</th>
                  <th class="text-left">Last Name</th>
                  <th class="text-left">Username</th>
                  <th class="text-left">Status</th>
            </tr>
      </thead>
      <tbody>
            <tr>
                  <td data-title="Nr">1</td>
                  <td data-title="First Name">John</td>
                  <td data-title="Last Name">Doe</td>
                  <td data-title="Username">johndoe</td>
                  <td data-title="Status">active</td>
            </tr>
            <tr>
                  <td data-title="Nr">2</td>
                  <td data-title="First Name">Jane</td>
                  <td data-title="Last Name">Doe</td>
                  <td data-title="Username">janedoe</td>
                  <td data-title="Status">active</td>
            </tr>
            <tr>
                  <td data-title="Nr">3</td>
                  <td data-title="First Name">Mark</td>
                  <td data-title="Last Name">Doe</td>
                  <td data-title="Username">markdoe</td>
                  <td data-title="Status">inactive</td>
            </tr>
            <tr>
                  <td data-title="Nr">4</td>
                  <td data-title="First Name">Kate</td>
                  <td data-title="Last Name">Doe</td>
                  <td data-title="Username">katedoe</td>
                  <td data-title="Status">active</td>
            </tr>
            <tr>
                  <td data-title="Nr">5</td>
                  <td data-title="First Name">Philip</td>
                  <td data-title="Last Name">Doe</td>
                  <td data-title="Username">philipdoe</td>
                  <td data-title="Status">active</td>
            </tr>
      </tbody>
</table>

Element name: FontAwesome icons

Output

Code


<i class="fa fa-adjust"></i> 
<i class="fa fa-anchor"></i> 
<i class="fa fa-archive"></i>
<i class="fa fa-arrows"></i> 
<i class="fa fa-arrows-h"></i>
<i class="fa fa-arrows-v"></i>
<i class="fa fa-asterisk"></i>
<i class="fa fa-automobile"></i>
<i class="fa fa-ban"></i>
<i class="fa fa-bank"></i>
<i class="fa fa-bar-chart-o"></i> 
<i class="fa fa-barcode"></i>
(...)
<i class="fa fa-info"></i>
<i class="fa fa-info-circle"></i>
<i class="fa fa-institution"></i>
<i class="fa fa-key"></i>
<i class="fa fa-keyboard-o"></i> 
<i class="fa fa-language"></i>
<i class="fa fa-user"></i>
<i class="fa fa-users"></i>
<i class="fa fa-video-camera"></i>
<i class="fa fa-volume-down"></i>

<p>Entire list of icons can be found here: http://fortawesome.github.io/Font-Awesome/icons/</p>

Element name: Drop caps

Output

Code


<p><span class="firstcharacter green">S</span> ometimes I feel as though there are two me's, one coasting directly on top of the other: the superficial me, who nods when she's supposed to nod and says what she's supposed to say, who nods when she's supposed to nod and says what she's supposed to say, who nods when she's supposed to nod and says what she's supposed to say. </p>	

Element name: Ordered lists

Output

Code


<ol class="ol">
	<li>The amount of whitespace that appears after each paragraph</li>
	<li>Padding, margins, and other units of whitespace </li>
	<li>Headline line-heights in a given width</li>
	<li>Any and all spatial properties that you wish to relate mathematically</li>
</ol>

Element name: Unordered lists

Output

Code


<ul class="ul">
	<li>The amount of whitespace that appears after each paragraph</li>
	<li>Padding, margins, and other units of whitespace </li>
	<li>Headline line-heights in a given width</li>
	<li>Any and all spatial properties that you wish to relate mathematically</li>
</ul>

Element name: Image align - RIGHT

Output

Code

Add class .float-left to alight an image to right


<p><img src="img/new/480x320/poza-4.jpg" width="276" height="300" alt="" class="float-right" /> Lectus elit molestie urna, id tristique risus  ante at est. Sed  at blandit vitae pulvinar lorem egestas. Quisque mollis, sem id laoreet pretium, lectus elit molestie urna, id tristique risus  ante at est. Sed at blandit vitae pulvinar lorem egestas.  Sed at blandit vitae pulvinar lorem egestas. Sed at blandit vitae demi.<br /><br /> Quisque mollis, sem id laoreet pretium, lectus elit molestie urna, id tristique risus  ante at est. Sed  at blandit vitae pulvinar lorem egestas. Quisque mollis, sem id laoreet pretium, lectus elit molestie urna, id tristique risus  ante at est. Sed at blandit vitae pulvinar lorem egestas. Sed at blandit vitae pulvinar lorem egestas. Sed at blandit vitae demi.</p>

Element name: Image align - LEFT

Output

Code

Add class .float-right to alight an image to right


<p><img src="img/article-image-1.jpg" width="276" height="300" alt="" class="float-left" /> Quisque mollis, sem id laoreet pretium, lectus elit molestie urna, id tristique risus  ante at est. Sed  at blandit vitae pulvinar lorem egestas. Quisque mollis, sem id laoreet pretium, lectus elit molestie urna, id tristique risus  ante at est. Sed at blandit vitae pulvinar lorem egestas. <br /><br />Quisque mollis, sem id laoreet pretium, lectus elit molestie urna, id tristique risus  ante at est. Sed  at blandit vitae pulvinar lorem egestas. Quisque mollis, sem id laoreet pretium, lectus elit molestie urna, id tristique risus  ante at est. Sed at blandit vitae pulvinar lorem egestas.</p>

Element name: Blockquotes

Output

Code


<blockquote>Instead of relying on arbitrary selection, wouldn’t it be nice if there were a way to determine the perfect typography settings?</blockquote>

Element name: Text Align left/center/right

Output

Code


<!-- Text align: left  -->
<h2 class="text-left black">Text align - left</h2>
<p class="text-left">Lectus elit molestie urna, id tristique risus ante at est. Sed  at blandit vitae pulvinar lorem egestas. Quisque mollis. Sem id laoreet pretium, lectus elit molestie urna, id tristique risus  ante at est. Sed at blandit vitae pulvinar lorem egestas.  Sed at blandit vitae pulvinar lorem egestas. Sed at blandit vitae demi quisque.</p>

<!-- Text align: center  -->
<h2 class="text-center black">Text align - center</h2>
<p class="text-center">Lectus elit molestie urna, id tristique risus ante at est. Sed  at blandit vitae pulvinar lorem egestas. Quisque mollis. Sem id laoreet pretium, lectus elit molestie urna, id tristique risus  ante at est. Sed at blandit vitae pulvinar lorem egestas.  Sed at blandit vitae pulvinar lorem egestas. Sed at blandit vitae demi quisque.</p>

<!-- Text align: right  -->
<h2 class="text-right black">Text align - right</h2>
<p class="text-right">Lectus elit molestie urna, id tristique risus ante at est. Sed  at blandit vitae pulvinar lorem egestas. Quisque mollis. Sem id laoreet pretium, lectus elit molestie urna, id tristique risus  ante at est. Sed at blandit vitae pulvinar lorem egestas.  Sed at blandit vitae pulvinar lorem egestas. Sed at blandit vitae demi quisque.</p>

Element name: Text highlight

Output

Code


<!-- Text highlight  -->
<p>Lectus elit molestie urna, id tristique risus ante at est. Sed  at blandit vitae pulvinar lorem egestas. Quisque mollis. <span class="highlight">Sem id laoreet pretium, lectus elit molestie urna, id tristique risus  ante at est.</span> Sed at blandit vitae pulvinar lorem egestas.  Sed at blandit vitae pulvinar lorem egestas. Sed at blandit vitae demi quisque.</p>

Element name: Columns

Output

Code


<!-- One half columns -->
<p class="one_half">Quisque mollis, sem id laoreet pretium, lectus elit molestie urna, id tristique risus ante at est. Sed pretium metus sit amet erat blandit vitae pulvinar. </p>	
<p class="one_half">Quisque mollis, sem id laoreet pretium, lectus elit molestie urna, id tristique risus ante at est. Sed pretium metus sit amet erat blandit vitae pulvinar. </p>

<!-- No columns -->
<p>Lectus elit molestie urna, id tristique risus  ante at est. Sed  at blandit vitae pulvinar lorem egestas. Quisque mollis, sem id laoreet pretium, lectus elit molestie urna, id tristique risus  ante at est. Sed at blandit vitae pulvinar lorem egestas.  Sed at blandit vitae pulvinar lorem egestas. Sed at blandit vitae demi quisque.</p>

<!-- One third columns -->
<p class="one_third">Quisque mollis, sem id laoreet pretium, lectus elit molestie urna, id tristique risus  ante at.</p>	
<p class="one_third">Quisque mollis, sem id laoreet pretium, lectus elit molestie urna, id tristique risus  ante at.</p>	
<p class="one_third">Quisque mollis, sem id laoreet pretium, lectus elit molestie urna, id tristique risus  ante at.</p>

<!-- 2/3 and 1/3  -->
<p class="two_third">Cras consequat potitor tincidunt. Praesent eu tincidunt lacus. Ut ut neque vitae erat congue venenatis. Duis hendrerit lacinia leo in dignissim. Aliquam erat voat sed porttitor dnissim hendrerit nibh.</p>	
<p class="one_third">Quisque mollis, sem id laort pretium, lectus elit molestie urna, id tristique risus ante at.</p>


<!-- Text highlight  -->
<p>Lectus elit molestie urna, id tristique risus ante at est. Sed  at blandit vitae pulvinar lorem egestas. Quisque mollis. <span class="highlight">Sem id laoreet pretium, lectus elit molestie urna, id tristique risus  ante at est.</span> Sed at blandit vitae pulvinar lorem egestas.  Sed at blandit vitae pulvinar lorem egestas. Sed at blandit vitae demi quisque.</p>

Element name: Buttons

Output: Buttons V1

Code


<div>
	<a class="button-v1 button-big white" href="#">Buy this template</a>
	<a class="button-v1 button-medium white" href="#">Buy this template</a>
	<a class="button-v1 button-small white" href="#">Buy this template</a>
</div>
<div>
	<a class="button-v1 button-big green" href="#">Buy this template</a>
	<a class="button-v1 button-medium green" href="#">Buy this template</a>
	<a class="button-v1 button-small green" href="#">Buy this template</a>
</div>
<div>
	<a class="button-v1 button-big black" href="#">Buy this template</a>
	<a class="button-v1 button-medium black" href="#">Buy this template</a>
	<a class="button-v1 button-small black" href="#">Buy this template</a>
</div>

Output: Buttons V1 - rounded

Code


<div>
	<a class="button-v1 button-big radius-button white" href="#">Buy this template</a>
	<a class="button-v1 button-medium radius-button white" href="#">Buy this template</a>
	<a class="button-v1 button-small radius-button white" href="#">Buy this template</a>
</div>
<div>
	<a class="button-v1 button-big green radius-button" href="#">Buy this template</a>
	<a class="button-v1 button-medium green radius-button" href="#">Buy this template</a>
	<a class="button-v1 button-small green radius-button" href="#">Buy this template</a>
</div>
<div>
	<a class="button-v1 button-big black radius-button" href="#">Buy this template</a>
	<a class="button-v1 button-medium black radius-button" href="#">Buy this template</a>
	<a class="button-v1 button-small black radius-button" href="#">Buy this template</a>
</div>

Output: Buttons V2

Code


<div>
	<a class="button-v2 button-big white" href="#">Buy this template</a>
	<a class="button-v2 button-medium white" href="#">Buy this template</a>
	<a class="button-v2 button-small white" href="#">Buy this template</a>
</div>
<div>
	<a class="button-v2 button-big green" href="#">Buy this template</a>
	<a class="button-v2 button-medium green" href="#">Buy this template</a>
	<a class="button-v2 button-small green" href="#">Buy this template</a>
</div>
<div>
	<a class="button-v2 button-big black" href="#">Buy this template</a>
	<a class="button-v2 button-medium black" href="#">Buy this template</a>
	<a class="button-v2 button-small black" href="#">Buy this template</a>
</div>

Output: Buttons V2 - rounded

Code


<div>
	<a class="button-v2 button-big white radius-button" href="#">Buy this template</a>
	<a class="button-v2 button-medium white radius-button" href="#">Buy this template</a>
	<a class="button-v2 button-small white radius-button" href="#">Buy this template</a>
</div>
<div>
	<a class="button-v2 button-big green radius-button" href="#">Buy this template</a>
	<a class="button-v2 button-medium green radius-button" href="#">Buy this template</a>
	<a class="button-v2 button-small green radius-button" href="#">Buy this template</a>
</div>
<div>
	<a class="button-v2 button-big black radius-button" href="#">Buy this template</a>
	<a class="button-v2 button-medium black radius-button" href="#">Buy this template</a>
	<a class="button-v2 button-small black radius-button" href="#">Buy this template</a>
</div>

Output: Travelogue map

Code


<!-- Map holder -->
<div class="travelogue-product travelogue-container">
    <div class="travelogue-product-wrapper">
    	<!-- Map image -->
        <img src="img/map.png" />

        <!-- ul with all the points -->
        <ul>
        	<!-- Single point -->
            <li class="travelogue-single-point">
                <a class="travelogue-img-replace" href="#0">More</a>

                <div class="travelogue-more-info travelogue-top">
                    <h2>Hot as Ice</h2>

                    <p>If hell was a real place, I bet this would be its capital.
                    Temperatures here can reach minus 55 degrees.</p><img src=
                    "img/map_i_was_here1.jpg" /> <a href="#0" class=
                    "travelogue-close-info travelogue-img-replace">Close</a>
                </div>
            </li><!-- End of .travelogue-single-point -->

            <!-- Single point -->
            <li class="travelogue-single-point">
                <a class="travelogue-img-replace" href="#0">More</a>

                <div class="travelogue-more-info travelogue-top">
                    <h2>Murica</h2>

                    <p>The wild wild west has calmed down a little bit. It is more
                    like calm calm west.</p><img src="img/map_i_was_here2.jpg" />
                    <a href="#0" class=
                    "travelogue-close-info travelogue-img-replace">Close</a>
                </div>
            </li><!-- End of .travelogue-single-point -->

            <!-- Single point -->
            <li class="travelogue-single-point">
                <a class="travelogue-img-replace" href="#0">More</a>

                <div class="travelogue-more-info travelogue-right">
                    <h2>In the jungle</h2>

                    <p>The last time I was in the jungle, a monkey jumped me and
                    stole my camera.</p><img src="img/map_i_was_here3.jpg" />
                    <a href="#0" class=
                    "travelogue-close-info travelogue-img-replace">Close</a>
                </div>
            </li><!-- End of .travelogue-single-point -->

            <!-- Single point -->
            <li class="travelogue-single-point">
                <a class="travelogue-img-replace" href="#0">More</a>

                <div class="travelogue-more-info travelogue-left">
                    <h2>The Balkans</h2>

                    <p>Oh, you have to love the balkan accent. I bet you, you will
                    love more their beautifull nature.</p><img src=
                    "img/map_i_was_here6.jpg" /> <a href="#0" class=
                    "travelogue-close-info travelogue-img-replace">Close</a>
                </div>
            </li><!-- End of .travelogue-single-point -->

            <!-- Single point -->
            <li class="travelogue-single-point">
                <a class="travelogue-img-replace" href="#0">More</a>

                <div class="travelogue-more-info travelogue-left">
                    <h2>Bearland</h2>

                    <p>If you love bears, go there but be warned they will not love
                    you.</p><img src="img/map_i_was_here4.jpg" /> <a href="#0" class=
                    "travelogue-close-info travelogue-img-replace">Close</a>
                </div>
            </li><!-- End of .travelogue-single-point -->

            <!-- Single point -->
            <li class="travelogue-single-point">
                <a class="travelogue-img-replace" href="#0">More</a>

                <div class="travelogue-more-info travelogue-bottom">
                    <h2>Australia</h2>

                    <p>Everything is upside down but the blood will not rush down to
                    your head. And there will be kangaroos.</p><img src=
                    "img/map_i_was_here5.jpg" /> <a href="#0" class=
                    "travelogue-close-info travelogue-img-replace">Close</a>
                </div>
            </li><!-- End of .travelogue-single-point -->
        </ul><!-- End of ul with all the points -->
    </div><!-- End of .travelogue-product-wrapper -->
</div><!-- End of Map holder

Output: Twitter Tweets

Code


<!-- Tweets -->
<div class="author_tweets_full white">
	<div class="boxed">
		<div class="one_sixth text-center">
			<i class="fa fa-twitter"></i>
		</div>
		<div class="sixth_one">
			<span>@modeltheme - <i>This is the best theme in the world #html5 #themeforest/item/travelogue... http://t.co/modeltheme - 3 days ago</i></span>
		</div>
	</div>
</div>

The theme comes with several CSS (stylesheet) files grouped in the stylesheet folder:

  1. styles.css - Main stylesheet of the template;
  2. responsive.css - Responsive stylesheet rules of the theme;
  3. component.css - Stylesheet with css3 effects;
  4. component-form.css - Fancy Contact form css stylesheet;
  5. component-gallery.css - Gallery stylesheet;
  6. font-awesome.min.css - Font Awesome stylesheet;
  7. YTPlayer.css - YTPlayer stylesheet;
  8. Normalize.css - makes browsers render all elements more consistently and in line with modern standards. It precisely targets only the styles that need normalizing.

 

To change the background image of top section of any page just replace the data-src="" value of the img html tag. See it above!

To change the video background of top section of any page just replace the videoURL:'zUBZpGaHC04' value. See it above!

To get a video id just follow next screenshot.

To see entire list of Youtube Player parameters please check: YTPlayer Documentation

Since v1.3 Travelogue comes with Mailchimp subscription form integrated.

To use this feature you must follow few small steps:

To change the receiver email address of the site follow these steps:

This template is heavili loaded with both custom JS functions and free jQuery plugins. All JS files are placed in a separate folder called "js". The list of files is as follows:

  1. jquery.min.js
  2. cbpGridGallery.js
  3. classie.js
  4. custom.js
  5. jquery.mb.YTPlayer.js
  6. modernizr.custom.gallery.js
  7. modernizr.custom.js
  8. modernizr.form.custom.js
  9. sidebarEffects.js
  10. stepsForm.js
  11. synchronize.js
  12. uisearch.js
  13. video.js
All JS functions related to the theme content management are placed in custom.js or inline in the HTML files if required. The custom.js file is responsible for every custom script running on the template.

 

 

 

The template comes with 14 customizable layered PSD files as follows:

  1. 01_home.psd
  2. 02_home_active_state.psd
  3. 03_category.psd
  4. 04_category_active_state.psd
  5. 05_product.psd
  6. 06_product_active.psd
  7. 07_info_page.psd
  8. 08_contacts_page.psd
  9. 09_cart_page.psd
  10. 10_compare_page.psd
  11. 11_login_page.psd
  12. 12_ratings_template.psd
  13. 13_slider_template.psd
  14. 13_logo_template.psd

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


Once again, thank you so much for purchasing this template. As we said at the beginning, We'd be glad to help you if you have any questions relating to this template.