Lemonage is Responsible HTML5 Onepage Template usable for agency, startup or little freelancers team. You can create portfolio to present your work or services. Template is built withBootstrap 3 framework. It is easily customizable, the choice is yours.
Once downloaded, unzip the compressed folder to see the structure of the Lemonage. You'll see next structure:
lemonage/
├── css/
│ ├── animate.css
│ ├── animate.min.css
│ ├── bootstrap.css
│ ├── bootstrap.min.css
│ ├── comingsoon.css
│ ├── font-awesome.css
│ ├── font-awesome.min.css
│ ├── lineabasic.css
│ ├── magnific-popup.css
│ ├── main.css
│ └── slick.css
├── fonts/
│ ├── FontAwesome.otf
│ ├── fontawesome-webfont* */.eot,.svg,.ttf,.woff/
│ ├── linea-basic-10* */.eot,.svg,.ttf,.woff/
│ ├── Novecento WideMedium* */.eot,.otf.ttf,.woff/
│ ├── Roboto Regular* */.eot,.svg,.ttf,.woff/
│ └── Roboto* */.eot,.svg,.ttf,.woff/│ ├── brands/
│ └── *images
│ ├── projects/
│ └── *images
│ ├── thumbs/
│ └── *images
│ └── *images
├── js/
│ └── vendor/
│ └── *for detailed list see js section
│ ├── bootstrap.js
│ ├── bootstrap│ ├── contact.js
│ ├── main.js
│ └── mymap.js
├── php/
│ ├── twitter/
│ ├── lib/
│ ├── tmhOAuth.php
│ └── tmhUtilities.php
│ └── index.php
│ └── contact-form.php├── bloglist.html
├── bloglist-sidebar.html
├── comingsoon.html
├── index.html
├── post-centered.html
├── post-sample
├── project1.html
├── project2.html
└── shortcodes.html
This theme is a responsive layout based on Bootstrap 3. All of the information within the main content area is nested within a body tag. The general template structure is the same throughout the template.
All pages are designed in sections and articles and are fully commented which allows you to easily build your own designs from the theme. You can freely change the order of elements. Simply copy and paste the entire section or article. This makes customizing the theme extremely simple.
Example slide Portfolio:
<!-- Portfolio -->
<section id="portfolio" class="portfolio">
<div class="container">
<div class="row">
<div class="col-md-12">
<header class="section-header">
<h4 class="section-title" data-text="Portfolio">Check our flow</h4>
<p>Suspendisse ultricies vitae sapien quis egestas. Phasellus porttitor <br>est ac sem porta vestibulum. Integer a felis sapien.</p>
</header>
</div>
</div>
<div class="row">
<div class="col-md-12">
<ul id="filter" class="filter">
<li><a data-filter="*" class="btn btn-default btn-sm" role="button">All</a></li>
...
</ul>
</div>
</div>
<div class="row">
<div class="col-md-12">
<article class="isotope">
<div class="grid-sizer"></div>
<div class="gutter-sizer"></div>
<div class="item webdesign" data-category="webdesign">
<figure class="item-figure">
<img src="img/thumbs/thumb001.jpg" class="img-responsive" alt="img">
<figcaption class="overlay">
<p>Lorem Ipsum dolor ismet</p>
<a href="project.html" class="ajax-popup-link"></a>
</figcaption>
</figure>
</div>
<div class="item illustration" data-category="illustration">
...
</div>
<div class="item photography" data-category="photography">
...
</div>
<div class="item branding" data-category="branding">
...
</div>
...
</article>
<a href="#" class="btn btn-default load-more" role="button">Load More</a>
</div>
</div>
</div>
</section>
All css files are located in css folder:
This file includes all general variables used in this template. If you want to change style and colors of the template you should start from this file.
/* ================================== Table of Contents ================================== ** @included fonts ** Basic ** Preloader ** Social List ** Navbar ** Header ** About ** Features ** Quotes ** Portfolio ** Call To Action ** Services ** Counters ** Team ** Skills ** Blog ** Tweets ** Pricing ** Clients ** Contact ** Google map ** Footer ** Another /Buttons, Helper Classes.../ ** Buttons ** Animations /On scroll/ ** Popup ** Progress Bars ** Collapse ================================== */
Bootstrap 3 Framework base stylesheets. Includes all components and elements, typography, lists, buttons, button groups, navigations, navbars, forms, labels, pricing tables and much more. This stylesheet must always be included! We recommend minified version bootstrap.min.css for use. For development you can use bootstrap.css, or you can customize Bootstrap's components, Less variables, and jQuery plugins to get your very own version here.
All Javascript files are located in js folder.
click event on mobile browsers.This is HTML5 template, you do not need create a database. You simply upload to the server.
It's important to understand that you must either have your own server space or use someone elses. The server space can be purchased at many different places around the internet. You need somewhere to put the files that you purchased so others can find them online.
The template folder will have several files with the extension labeled .html. This is where all your content will. It's very important to keep the css and js-plugin folders with the HTML or the HTML will not look how the design is meant to look. Along with the HTML files, you will also have four additional folders to upload: css, js, fonts, and images.
Start your FTP client (Total Commander or FileZilla) and login. Login to your server. You will need your server name (often times this will be your domain name), username, and password that you setup with the hosting company.
Complement your content, write your text, load your photos and images.
Setting the counters make directly in HTML code. Open index.html and follow the example below:
<!-- Counters -->
<section class="counters">
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="numbers">
<span class="number" data-from="0" data-to="987" data-speed="5000" data-refresh-interval="50"></span>
<span class="number-info">Creative Ideas</span>
</div>
</div>
<div class="col-md-3">
<div class="numbers">
<span class="number" data-from="0" data-to="218" data-speed="5000" data-refresh-interval="50"></span>
<span class="number-info">Projects Designed</span>
</div>
</div>
<div class="col-md-3">
<div class="numbers">
<span class="number" data-from="0" data-to="1356" data-speed="5000" data-refresh-interval="50"></span>
<span class="number-info">Pizzas Eaten</span>
</div>
</div>
<div class="col-md-3">
<div class="numbers">
<span class="number" data-from="0" data-to="1856" data-speed="5000" data-refresh-interval="50"></span>
<span class="number-info">Coffee Drunk</span>
</div>
</div>
</div>
</div>
</section>
Change number value data-to="number".
For further documentation and setting information, see jQuery countTo.
Setting the charts make directly in HTML code. Open index.html and follow the example below:
<!-- Skills -->
<section class="skills">
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-3">
<div class="chart" data-percent="89">
<span class="percent" data-from="0" data-to="89"></span>
</div>
<h5>HTML5</h5>
</div>
<div class="col-sm-6 col-md-3">
<div class="chart" data-percent="85">
<span class="percent" data-from="0" data-to="85"></span>
</div>
<h5>CSS3</h5>
</div>
<div class="col-sm-6 col-md-3">
<div class="chart" data-percent="75">
<span class="percent" data-from="0" data-to="75"></span>
</div>
<h5>jQuery</h5>
</div>
<div class="col-sm-6 col-md-3">
<div class="chart" data-percent="80">
<span class="percent" data-from="0" data-to="80"></span>
</div>
<h5>Adobe</h5>
</div>
</div>
</div>
</section>
Change number value data-percent="number".
For further documentation and setting information, see Easy Pie Chart.
(changing value percent - see Counters Settings above)
Open comingsoon.html. Just edit data-date="YYYY-MM-DD HH:MM:SS".
Set date and time, example 2015-09-30 23:59:59
<!-- Coming soon -->
<section class="comingsoon">
<div class="container">
<div class="row">
<div class="col-md-12">
<header class="section-header">
<h3 class="section-title" data-text="Coming Soon">It´s time for website redesign</h3>
</header>
</div>
<div class="col-md-8 col-md-offset-2">
<div id="dateCountdown" data-date="2015-09-30 23:59:59"></div><!-- Time Circles -->
<p>But don´t wait, learn more about us now.</p>
<button type="button" class="btn btn-danger btn-sm" data-toggle="modal" data-target="#myModal">
Who we are
</button>
</div>
</div>
</div>
</section>
For further documentation and setting information, see Time Circles.
To change the animation, edit the value data-animation="{animation name}". Animation name can you find on Animate.css.
To change the animation delay, edit the value data-animation-delay="{number}". The numerical values are: 01 = 0s, 02 = 0.5s, 03 = 1s, 04 = 1.5s, 05 = 2s, 06 = 2.5s.
You can build your own delay. At the end of the stylesheet main.css you will find this model:
/* ==================================
Create delay as follows:
BUILD ANIMATION DELAY, EXAMPLE 3s: animation-delay: 3s
.animated.delay-[time] {
-webkit-animation-delay: [time]s;
-moz-animation-delay: [time]s;
-ms-animation-delay: [time]s;
animation-delay: [time]s;
}
================================== */
To edit the Google Map style and location marker please open mymap.js in your favorite text editor. Edit the location marker, enter your Address or Latitude and Longitude coordinates.
You can find your Lat and Lng by using this resource: http://www.latlong.net/convert-address-to-lat-long.html
// ---------------------------------------
// // GMap 3 - Set Address on line 79
// ---------------------------------------
var styles = [
...
];
$("#my-map").gmap3({
marker:{
address: '48.871663 , 2.304572' < = = = Line 79 in script, HERE SET ADDRESS Coordinates
},
map:{
options:{
...
}
}
});
Example with full address:
$("#my-map").gmap3({
marker:{
address: "San Francisco, CA 94107, 795 Folsom Ave" < = = = Write a traditional address
},
map:{
options:{
...
}
}
});
This template contains fully working contact form. Forms used jQuery form validation library, script contact.js (must be included before end body tag) and php file (contact-form.php or newsletter.php).
In order to receive messages you need to edit line 8 of php/contact-form.php file and type in your own email address:
<?php ... // Your email address - edit line 8 $to = 'your@mail.com'; < = = = HERE REPLACE YOUR EMAIL ADDRESS ... ?>
Plugin is based on jquery.tweet.js-mod plugin by Stan Scates. It is simple to use and configure.
First step: You need to have a twitter App for your usage in order to obtain OAuth credentials. See https://dev.twitter.com/apps for help.
Second step: After obtaining OAuth credentials, put them to php/twiter/index.php. Edit following code:
<?php /* Configure your twitter API access params below */ // Your Twitter App Consumer Key $consumer_key = 'YOUR_CONSUMER_KEY'; < = = = HERE REPLACEYOUR CONSUMER KEY// Your Twitter App Consumer Secret $consumer_secret = 'YOUR_CONSUMER_SECRET'; < = = = HERE REPLACE YOURCONSUMER SECRET// Your Twitter App Access Token $user_token = 'YOUR_ACCESS_TOKEN'; < = = = HERE REPLACE YOURACCESS TOKEN// Your Twitter App Access Token Secret $user_secret = 'YOUR_ACCESS_TOKEN_SECRET'; < = = = HERE REPLACE YOURACCESS TOKEN SECRET
The third step: Open js/main.js (record for twitter script starts on line 145) and edit this code, especially line 150:
// -----------------------------
// Twitter
// -----------------------------
$(".twitter-feed").tweet({
join_text: "auto",
username: ["username"], < = = = Line 150 SPECIFY TWITTER USERNAME (see info below)
modpath: "php/twitter/",
count: 6, < = = = Line 152 (Optional) SET NUMBER OF LOADED TWEETS
loading_text: "loading ...",
template: "{text},{time},{user}",
auto_join_text_default: " ", //We said,
auto_join_text_ed: " ", //We
auto_join_text_ing: " ", //We were
auto_join_text_reply: " ", //We replied
auto_join_text_url: " " //We were checking out
});
You may specify twitter username to fetch tweets from. By default it is blank, because it will fetch tweets from user, who owns the Twitter App, that you configured at php/twitter/index.php.
You can load tweets from another user. As you can see in the example above, will now be loaded tweets by envato.
For further documentation about jquery.tweet plugin, see Author Repository.
Template uses icons font Linea Icons. It contains 730+ icons that you can easily use and customize.
You can placeLinea icons just about anywhere with the i tag. You can also use other techniques, with span or a, but i tag is the best choice.
<i class="linea icon-basic-display"></i>
Replace icon name, example icon-basic-display, with the actual icon name you wish to display, example icon-basic-heart. Full list of icons: visit Linea Icons.
Analogous like Linea Icons. Font Awesome contains 479 icons that you can easily use and customize.
You can place Font Awesome icons just about anywhere with the i tag. You can also use other techniques, with span or a, but i tag is the best choice.
<i class="fa fa-heart"></i>
Replace icon name, example fa-heart, with the actual icon name you wish to display. Full list of icons: visit Font Awesome
Slides with background images using a color filters. If the image is too bright or too dark, or if the font is not visible in the background or for a nicer effect. You can easily customize it as needed.
Example 1:
#home:before { /* Use this color filter - for example with too light bg image
content: " ";
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
background-color: rgb(43, 45, 53); /*fallback*/
background-color: rgba(43, 45, 53, 0.50); < = = = RGBA: SET OPACITY 0-1
}
Example 2:
#home:before { /* Use this color filter - for example with too light bg image
content: " ";
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
background-color: #808080;
opacity: 0.2; < = = = SET ELEMENT OPACITY 0-1
}
Please feel free to contact us, if you have question or problem about this template.
Guarantee support for HTML and CSS issues. Troubleshooting with javascript and jquery - we will do what we can.
Thank you for purchasing our theme. We look forward to equally successful cooperation in the future!
Your Theme Kiosk