Lantern

Responsive Offer Template


Lantern Responsive Offer Template is specially designed for showing product and service offers. You can easily handle your special offers via Lantern Offer Template.

1. Theme Features

2. HTML5 and Structure

3. CSS files anSd Structure

4. Javascript Plugins / Scripts

5. Sources and Credits

A) Structure

Here you can see the structure of main html file.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Lantern - Responsive Offer Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="">

<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<link rel="shortcut icon" href="img/favicon.ico">

<!-- Core CSS -->
[Core stylesheets goes here]

<!-- Color Variations -->
[Template color stylesheets goes here]

<!-- Google Fonts here -->
[Google Font type goes here]

</head>

<body>

<!-- Preloader -->
<div id="mask">
    [Preloader goes here]
</div>
<!-- End Preloader -->

<!-- Styleswitcher -->
<div class="colors-switcher" style="left:-50px;">
    [Style Switcher goes here (*optional)]
</div>    
<!-- End Styleswitcher -->

<!-- Header Area -->
<header id="top" class="header clearfix">
    <div class="logo_container"><a href="#">[Logo Goes Here]</a></div><!-- Logo Top -->
    <div class="container">
        <!-- Slider Container -->
        <div class="flexslider">
            <ul class="slides">
                <!-- Slider 01 -->
                <li>
                    [Slide Goes Here]
                </li>
                <!-- End Slider 01 -->
                
                <!-- Slider 02 -->
                <li>
                    [Slide Goes Here]
                </li>
                <!-- End Slider 02 -->
                
                <!-- Slider 03 -->
                <li>
                    [Slide Goes Here]
                </li>
                <!-- End Slider 03 -->
            </ul>
        </div>
        <!-- End Slider Container -->
    </div>
    
    <!-- Offer Countdown -->
    <div class="header_bottom">
        <p class="slide_up">Offer end in</p>
        [Count Down Content Goes Here]
    </div>
    <!-- End Offer Countdown -->
</header>
<!-- End Header Area -->

<!-- Sub Header Area -->
<section class="sub-header" id="offer">
    <div class="main-navigation slide_up">
        <div class="container">
            <div class="row">
                <div class="col-md-3 logo"><a href="#">[Logo Goes Here]</a></div><!-- Logo -->
                <div class="col-md-9 menu">
                    <!-- Navigation -->
                    [Navigation Content Goes Here]
                    <!-- End Navigation -->
                </div>
            </div>
        </div>
    </div>
    <article class="container">
        <div class="offer-image expand_Up"><img src="img/lady01.png" alt=""></div>
        <!-- Sub Heading Offer -->
        [Offer Sub Header Goes Here]
        <!-- End Sub Heading Offer -->
    </article>
</section>
<div class="shadow-long"></div>

<!-- End Sub Header Area -->

<!-- Content Area -->
<section>
    <article class="container offers-cont">
        [Content Colomns Goes Here]
    </article>
    
    <!-- Special Offer Parallax -->
    <article class="special-offer-bg clearfix">
        <div class="special-offer-inner">
            <!-- Parallax Content -->
            [Parallax Content Goes Here]
            <!-- End Parallax Content -->
        </div>
    </article>
    <!-- End Special Offer Parallax -->
    
    <!-- Product Features -->
    <article class="page-devide clearfix" id="features">
        [Product Features Content Goes Here]
    </article>
    <!-- End Product Features -->
    
    <!-- Price List -->
    <article class="price-list-bg clearfix" id="price">
        <div class="price-list-inner">
            [Price List Content Goes Here]
        </div>
    </article>
    <!-- End Price List -->
    
    <!-- Product Gallery -->
    <article class="page-devide clearfix" id="gallery">
        [Product Offer Gallery Goes Here]
    </article>
    <!-- End Product Gallery -->
    
    <!-- Experts Says -->
    <article class="experts-says-bg clearfix">
        <div class="experts-says-inner">
            [Testimonial Sliders Goes Here]
        </div>
    </article>
    <!-- End Experts Says -->
    
    <!-- Newsletter -->
    <article class="newsletter-cont">
        <div class="container text-center">
            [Newsletter Content Goes Here]
        </div>
    </article>
    <!-- End Newsletter -->
    
    <!-- Contact Us -->
    <article class="contact-us-main clearfix" id="contact">
        <div class="contact-us-sub">
            [Contact Contents Goes Here]
        </div>
    </article>
    <!-- End Contact Us -->
</section>
<!-- End Content Area -->

<!-- Footer -->
<footer class="clearfix">
    [Footer Contents Goes Here]
</footer>
<!-- End Footer -->

<!-- JavaScript -->
[Javascripts Goes Here]

</body>
</html>

 

B) Pages

Here you can see how to edit / add page contents in this theme. We are providing 6 pages in this Template. You can add more pages in this template if you want. Here we are providing Homepage, Offer, Features, Price List, Offer Gallery, Contact Us. Also you can see a Footer too.

Home Page

On the home page we are showing banner contents. you can add or remove contents of banner in this section. You can see the HTML code bellow.

<!-- Header Area -->
<header id="top" class="header clearfix">
    <div class="logo_container"><a href="#">[Company Logo Goes Here]</a></div><!-- Logo Top -->
    <div class="container">
        <!-- Slider Container -->
        <div class="flexslider">
            <ul class="slides">
                <!-- Slider 01 -->
                <li>
                    [1st Slide Goes Here]
                </li>
                <!-- End Slider 01 -->
                
                <!-- Slider 02 -->
                <li>
                    [2nd Slide Goes Here]
                </li>
                <!-- End Slider 02 -->
                
                <!-- Slider 03 -->
                <li>
                    [3rd Slide Goes Here]
                </li>
                <!-- End Slider 03 -->
            </ul>
        </div>
        <!-- End Slider Container -->
    </div>
    
    <!-- Offer Countdown -->
    <div class="header_bottom">
        <p class="slide_up">Offer end in</p>
        <ul class="slide_up">
            <li><span id="days">00</span>Days</li>
            <li><span id="hours">00</span>Hours</li>
            <li><span id="minutes">00</span>Minutes</li>
            <li><span id="seconds">00</span>Seconds</li>
        </ul>
    </div>
    <!-- End Offer Countdown -->
</header>
<!-- End Header Area -->

 

Offer

Here you can add / edit your product offer contents. You can check the html structure bellow.

<!-- Sub Header Area -->
<section class="sub-header" id="offer">
    <div class="main-navigation slide_up">
        <div class="container">
            <div class="row">
                <div class="col-md-3 logo"><a href="#">[Logo Goes Here]</a></div><!-- Logo -->
                <div class="col-md-9 menu">
                    <!-- Navigation -->
                    <ul>
                        <li>[Menu Link Goes Here]</li>
                    </ul>
                    <!-- End Navigation -->
                </div>
            </div>
        </div>
    </div>
    <article class="container">
        <div class="offer-image expand_Up"><img src="img/lady01.png" alt=""></div>
        <!-- Sub Heading Offer -->
        <div class="offer-content">
            [Sub Header Content Goes Here]
        </div>
        <!-- End Sub Heading Offer -->
    </article>
</section>
<div class="shadow-long"></div>
<!-- End Sub Header Area -->

<!-- Content Area -->
<section>
    <article class="container offers-cont">
        [Offer Row Goes Here]
    </article>
    
    <!-- Special Offer Parallax -->
    <article class="special-offer-bg clearfix">
        <div class="special-offer-inner">
            <!-- Parallax Content -->
            [Parallax Content Goes Here]
            <!-- End Parallax Content -->
        </div>
    </article>
    <!-- End Special Offer Parallax -->

 

Features

Here you can add / edit your product features. You can check the html structure bellow.

<!-- Product Features -->
<article class="page-devide clearfix" id="features">
    <div class="container">
        <h1 class="text-center slide_up">[Features Page Heading Goes Here]</h1>
        <hr class="header-bot">
        <p class="caps slide_up">[Features Page Sub Heading Goes Here]</p>
        
        <div class="row features-cont clearfix">
            <div class="col-md-4 features-cont-left">
                [Features 1st Col Content Goes Here]
            </div>
            
            <div class="col-md-4 features-cont-center">
                [Features 2nd Col Content / Image Goes Here]
            </div>
            
            <div class="col-md-4 features-cont-right">
                [Features 3rd Col Content Goes Here]
            </div>
        </div>
    </div>
</article>
<!-- End Product Features -->

 

Price List

Here you can add / edit your product price. You can check the html structure bellow.

<!-- Price List -->
<article class="price-list-bg clearfix" id="price">
    <div class="price-list-inner">
        <div class="container">
            <h1 class="text-center slide_up">[Price List Heading]</h1>
            <hr class="header-bot01">
            <p class="caps slide_up">[Price List Sub Heading]</p>
            
            <div class="row price-list-all">
                
                <!-- Price01 -->
                <div class="col-md-3 price-list">
                    [Price List 1st Content]
                </div>
                <!-- End Price01 -->
            
                <!-- Price02 -->
                <div class="col-md-3 price-list active">
                    [Price List 2nd Content]
                </div>
                <!-- End Price02 -->
            
                <!-- Price03 -->
                <div class="col-md-3 price-list">
                    [Price List 3rd Content]
                </div>
                <!-- End Price03 -->
            
                <!-- Price04 -->
                <div class="col-md-3 price-list">
                    [Price List 4th Content]
                </div>
                <!-- End Price04 -->
            
            </div>
            
            <div class="price-info"><p>[Price Note Goes Here]</p></div>
        </div>
    </div>
</article>
<!-- End Price List -->

 

Offer Gallery

Here you can add / edit your product offers. You can check the html structure bellow.

<!-- Product Gallery -->
<article class="page-devide clearfix" id="gallery">
    <div class="container">
        <h1 class="text-center slide_up">[Page Heading Goes Here]</h1>
        <hr class="header-bot">
        <p class="caps slide_up">[Page Sub Heading Goes Here]</p>
        
        <div class="product-gallery-cont">
        
            <!-- Gallery container -->
            <div id="container" class="isotom_lant clearfix">
                <!-- Gallery Links -->
                <ul class="row clearfix">
                
                    <!-- Item 01 -->
                    <li class="col-md-3">
                        [Offer Item 1 Goes Here]
                    </li>
                    <!-- End Item 01 -->
                    
                    <!-- Item 02 -->
                    <li class="col-md-3">
                        [Offer Item 2 Goes Here]
                    </li>
                    <!-- End Item 02 -->
                    
                    <!-- Item 03 -->
                    <li class="col-md-3">
                        [Offer Item 3 Goes Here]
                    </li>
                    <!-- End Item 03 -->
                    
                    <!-- Item 04 -->
                    <li class="col-md-3">
                        [Offer Item 4 Goes Here]
                    </li>
                    <!-- End Item 04 -->
                    
                    <!-- Item 05 -->
                    <li class="col-md-3">
                        [Offer Item 5 Goes Here]
                    </li>
                    <!-- End Item 05 -->
                    
                    <!-- Item 06 -->
                    <li class="col-md-3">
                        [Offer Item 6 Goes Here]
                    </li>
                    <!-- End Item 06 -->
                    
                    <!-- Item 07 -->
                    <li class="col-md-3">
                        [Offer Item 7 Goes Here]
                    </li>
                    <!-- End Item 07 -->
                    
                    <!-- Item 08 -->
                    <li class="col-md-3">
                        [Offer Item 8 Goes Here]
                    </li>
                    <!-- End Item 08 -->
                    
                </ul>
                <!-- End Gallery Links -->
            </div>
            <!-- End Gallery container -->
            
        </div>
    </div>
</article>
<!-- End Product Gallery -->

 

Contact Us.

Here you can add / edit your contact details / contact form. You can check the html structure bellow.

<!-- Contact Us -->
<article class="contact-us-main clearfix" id="contact">
    <div class="contact-us-sub">
        <div class="container clearfix">
            <div class="col-md-12">
                <h1 class="text-center slide_up">[Heading Goes Here]</h1>
                <hr class="header-bot01">
            </div>
            <div class="col-md-4 contact-address">
                <span class="contact-ico"><i class="fa fa-map-marker"></i></span>
                <h4>Address</h4>
                [Address Goes Here]
                
                <h4>Social</h4>
                <ul class="social">
                    <li>[Social Icons Goes Here]</li>
                </ul>
            </div>
            <div class="col-md-8 contact-form">
                <span class="contact-ico slide_up"><i class="fa fa-envelope"></i></span>
                <h4 class="slide_up">Get in touch</h4>
                <div class="row">
                    <form method="post">
                        [Contact Form Goes Here]
                    </form>
                </div>
            </div>
        </div>
    </div>
</article>
<!-- End Contact Us -->

 

Footer

Here you can add / edit your footer contents. You can check the html structure bellow.

<!-- Footer -->
<footer class="clearfix">
    <div class="container">
        <div class="copy">[Copyright Content Goes Here]</div>
        <div class="design">[Designed By Content Goes Here]</div>
    </div>
</footer>
<!-- End Footer -->

 

Lantern Responsive Offer Template is working with many  'CSS' files, we devided the CSS files to 2 different types. that are Core CSS and Color Variations. All the css files are included in the CSS folder.

A. Core CSS

These are the important files for the working of this theme. There are 7 core files for Lantern Responsive Offer Template, those files are,

1. bootstrap.css
2. font-awesome/css/font-awesome.min.css
3. flexslider.css
4. magnific-popup.css
5. animations.css
6. switcher.css
7. style.css

Css files are includede in the <head> section. Html codes are given bellow,

<!-- Core CSS -->
<link type="text/css" rel="stylesheet" href="css/bootstrap.css"><!-- Bootstrap -->
<link type="text/css" rel="stylesheet" href="font-awesome/css/font-awesome.min.css"><!-- font-awesome -->
<link type="text/css" rel="stylesheet" href="css/flexslider.css"><!-- Slider -->
<link type="text/css" rel="stylesheet" href="css/magnific-popup.css"><!-- Gallery Popup -->
<link type="text/css" rel="stylesheet" href="css/animations.css"><!-- Animate -->
<link type="text/css" rel="stylesheet" href="css/switcher.css"><!-- Color Switcher CSS -->
<link type="text/css" rel="stylesheet" href="css/style.css"><!-- Theme Core CSS -->



B. Color Variations

These are 10 color variations are included in Lantern Responsive Offer Template. those files are,

1. deep-yellow.css
2. yellow.css
3. orange.css
4. pink.css
5. gray.css
6. blue.css
7. purple.css
8. sky.css
9. green.css
10. light-green.css

Css files are includede in the <head> section. Html codes are given bellow,

<!-- Color Variations -->
<link type="text/css" rel="stylesheet" href="css/deep-yellow.css" title="deep-yellow">
<link type="text/css" rel="stylesheet" href="css/yellow.css" title="yellow">
<link type="text/css" rel="stylesheet" href="css/orange.css" title="orange">
<link type="text/css" rel="stylesheet" href="css/pink.css" title="pink">
<link type="text/css" rel="stylesheet" href="css/gray.css" title="gray">
<link type="text/css" rel="stylesheet" href="css/blue.css" title="blue">
<link type="text/css" rel="stylesheet" href="css/purple.css" title="purple">
<link type="text/css" rel="stylesheet" href="css/sky.css" title="sky">
<link type="text/css" rel="stylesheet" href="css/green.css" title="green">
<link type="text/css" rel="stylesheet" href="css/light-green.css" title="light-green">

 

Javascripts are attached bottom of the html page. you can follow all the javascript files in the js folder.

Here we are introdusing common javascript files here. There are 8 javascript files for all the layouts those are,

1. jquery-1.10.2.js -

jquery plugin for supporting all the javascripts.


2. bootstrap.js -

This file is supporting all the bootstrap javascripts


3. countdown.js -

This file is used for the offer countdown timer on the header.


4. forms.js -

This file is for ajax contact form.


5.jquery.flexslider.js -

This javascript file is used for the banner slider.


6. styleswitcher.js -

This file is used for demo purpose, This script is for switching the color css files one by one.


7. jquery.magnific-popup.js -

This file is used for offer gallery popup (Popup appears when clicking on offer gallery image).


8. system.js -

I used this file as a settings file for the above javascripts.
 

Thank you very much for purchasing this template. We are also thanking for the supportive websites that helps to build this theme.


http://getbootstrap.com/
https://www.google.com/fonts

http://jquery.com/
www.woothemes.com/flexslider/
http://www.hdwallpapers.in
http://wallpaperswide.com

http://www.bewallpaper.com


Thanks again...! If you need any support related this template, pls feel free to contact us via our email - lanternthemes@gmail.com