Before we start, lets take a look on the folder structure of the theme. All theme files are placed in the HTML folder.
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
/* 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;
}
<!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>
<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>
<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>
<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>
<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>
<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>
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>
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>
<blockquote>Instead of relying on arbitrary selection, wouldn’t it be nice if there were a way to determine the perfect typography settings?</blockquote>
<!-- 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>
<!-- 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>
<!-- 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>
<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>
<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>
<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>
<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>
<!-- 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
<!-- 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:
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:
We've used the following images, icons or other files as listed.