APPEO

Responsive Multipurpose Landing Page


Thank you for purchasing our theme. If you have any questions that are beyond the scope of this help file, please feel free to email via our user page contact form here. Thanks so much!

All the directories and files are well organized as it shown on the image bellow. Same file tree has been leaveraged for dark version.

 

HTML File Structure

This template is a mobile friendly (responsive) layout which is designed based on Twitter boosstrap 3.2. See our HTML file structure which is in index.html. Your contents goes inside container.

<!--============================

start:preloder

=============================-->

<div id="preloader">

    *preloder*

</div>

<!--==========================
end:preloder
============================-->


<!--===================

Strat:Header

=====================-->

    <header>

        <div class="container-fluid">

            <div class="row">

                <!--header title-->

                <div class="col-sm-12 col-xs-12 col-md-6 col-lg-6  heading_part">

                   <!--content goes here-->

                </div>

            </div>

        </div>

    </header>

<!--===========
End:Header
============-->



<!--==================

start:video

=====================-->

<div class="video">

    <div class="container video-container">

         <div class="row">

             <div class="col-md-8 col-md-offset-2 video-position">

                       <!--video place here-->

               </div>

         </div>

     </div>

</div>

<!--=========================
end:video
============================-->



<!--=============

Start:Who we are

================-->

    <section class="who_we_are">

        <div class="container">

            <div class="row">

                <!--sponser logo-->

                <div class="col-md-10 col-lg-10 col-sm-12 col-xs-12 col-md-offset-1 col-lg-offset-1 logos">

                    <div><img src="........" alt="logo1"></div>

                    ...............

                </div>

            </div>

            <div class="row title-who_we_are">

                ..................................

            </div>

            <!--start:photo $ info-->

            <!--group 1-->

            <div class="row photo_with_info">

                .........................

                ....................

                .............

            </div>

        </div>

    </section>

<!--=================
End:Who we are
==================-->



<!--====================

start:app screen

=====================-->

    <div class="app_screen">

        <div class="container-fluid">

            <div class="row ">

                <!--app screenshot-->

                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 slider_container clear-padding">

                   

                    ****************************

                </div>

            </div>

        </div>

    </div>

<!--=================
end:app screen
==================-->




<!--=================

start:some core facts

==================-->

    <section class="some_core_facts">

        <div class="container">

            <div class="row">

               ............................

            </div>

        </div>

    </section>

<!--================
end:some core facts
==================-->



<!--============

start:blue downlode

==============-->

    <section class="blue_downlode">

        <div class="container">

            ..............................

        </div>

    </section>

<!--==============
end:blue downlode
===============-->




<!--=========================

start: FAQ(accordion)

==========================-->

    <section class="faq">

        <div class="container">

            <div class="row">

                <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 accordion">

                       ..................................

                  </div>

            </div>

        </div>

    </section>

<!--======================
end:FAQ(accordion)
=======================-->




<!--=======================

start:testemonials

==========================-->

    <div class="testemonials">

        <div class="container">

           ................................

               

        </div>

    </div>

<!--==================
end:testemonials
===================-->




<!--===================

start:get latest app

=====================-->

    <div class="get_latest_app">

        <div class="container">

            <div class="row">

                ..........................

            </div>

        </div>

    </div>

<!--=================
end:get latest app
==================-->




<!--==============

start:contact us

===============-->

    <section class="contact">

        <div class="container">

            <div class="row">

                ...................................

            </div>

        </div>

    </section>

<!--============
end:contact us
=============-->








<!--========================

start:google map

===========================-->

    <div class="container-fluid clear-padding map">

        <div class="col-md-12 col-lg-12" id="google-map"></div>

    </div>

<!--====================
end:google map
======================-->



<!--==================

Start:footer

===================-->

    <footer class="text-center">

        <div class="container">

            <div class="row">

                ..............................

            </div>

        </div>

    </footer>

<!--=================
end:footer
==================-->

 

CSS File Structure

We are using 10 CSS files across template and comments in capital letter describe the linked stylesheet bellow. We separated styles for improving convenience to edit this template. If you're going to use this template in production I'd recommend you to merge all stylesheets in one file (for decreasing http queries).

<!--bootstrap-->

    <link rel="stylesheet" type="text/css" href="./assets/bootstrap/css/bootstrap.min.css">
    <!--font-->
    <link href='https://fonts.googleapis.com/css?family=Montserrat:400,700|Lato:400,300,100' rel='stylesheet' type='text/css'>
    <!--icon-->
    <!--note:we used font-awesome for font-icon-->
    <link rel="stylesheet" type="text/css" href="./assets/fonts/font-awesome-4.6.3/css/font-awesome.min.css">
    <!--plugins-->

    <link rel="stylesheet" type="text/css" href="./assets/css/plugins/animate.css">

    <link rel="stylesheet" type="text/css" href="./assets/css/plugins/owl.carousel.css">

    <link rel="stylesheet" type="text/css" href="./assets/css/plugins/owl.theme.default.css" />

    <link rel="stylesheet" type="text/css" href="./assets/css/plugins/lightbox.css" />

    <link rel="stylesheet" type="text/css" href="./assets/css/plugins/preloder.css" />

    <!--custrom css file-->

    <link rel="stylesheet" href="./assets/css/style.css" />

    <!--colors-->

    <link rel="stylesheet" type="text/css" href="./assets/css/color/default-color.css" class="active">

    <!--<link rel="stylesheet" type="text/css" href="./assets/css/color/color-1.css">

    <link rel="stylesheet" type="text/css" href="./assets/css/color/color-2.css">

    <link rel="stylesheet" type="text/css" href="./assets/css/color/color-3.css">

    <link rel="stylesheet" type="text/css" href="./assets/css/color/color-4.css">

    <link rel="stylesheet" type="text/css" href="./assets/css/color/color-5.css">

    <link rel="stylesheet" type="text/css" href="./assets/css/color/color-6.css">

    <link rel="stylesheet" type="text/css" href="./assets/css/color/color-7.css">

    <link rel="stylesheet" type="text/css" href="./assets/css/color/color-8.css">-->

 

jQuery File Structure


    <!--java script file-->

    <script src="./assets/js/jquery-2.1.4.min.js"></script>

    <!--plugins-->

    <script src="./assets/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>

    <!--add owl carousel slider-->

    <script src="./assets/js/plugins/owl.carousel.min.js" type="text/javascript"></script>

    <!--add niceScroll-->

    <script src="./assets/js/plugins/jquery.nicescroll.min.js" type="text/javascript"></script>

    <!--add light box-->

    <script src="./assets/js/plugins/lightbox.min.js" type="text/javascript"></script>

    <!--add fitvids-->

    <script src="./assets/js/plugins/jquery.fitvids.js" type="text/javascript"></script>

    <!--add google map-->

    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script>

    <!--custrom file-->

    <script src="./assets/js/functions.js" type="text/javascript"></script>

 

There are 6 jQuery files including necessary plugins, all of them be found in jsfolder of home directory. Let's see what each file for:

  1. jquery.2.4.1.min.js is stayable version of jQuery which is required to place upon all scripts otherwise none of jquery code will work.
  2. bootstrap.min.js is a plugin comes with Twitter Bootstrap dist.
  3. smoothscroll.js is a plugin for smoothly scrolling effect. It is currently closed with typical HTML comment to not to take effect on document because another plugin handle the same effect.
  4. owl.carousel.min.js is a popular jQuery plugin which is used for building touch enabled slider.
  5. jquery.ajaxchimp.min.js is a jQuery plugin which is used to send information to MailChimp list directly using our form in subscription section. ajaxChimp on GitHub.
  6. function.js This file must

We have used 2 types of font throughout the templates.

  1. Montserrat   for Title texts
  2. Lato   for Body texts
	.font-1 {
	  font-size:24px;
	  font-family:$primary_font;
	  font-weight:400;
	  color:black; 
	  text-transform:uppercase;
	}



	.font-2 {
	  font-size:18px;
	  font-family:$sub-primary-font;
	  font-weight:400;
	}


	Notes:  This Template Defult [ font-family: 'Lato', serif; ] [ font-style: normal; ] [ font-size: 18px; ]
	

 

 

All of the fonts are available on google fonts. You can choose other fonts from google directory. We have linked them at  head  part in  index.html .

	<!-- google font -->
	<link href='https://fonts.googleapis.com/css?family=Montserrat:400,700|Lato:400,300,100' rel='stylesheet' type='text/css'>
	

Check <head> part of your index.html page. You will find all colors link available. PATER RIVER default-color.css color is activated by default. But if you want to use another color just simply uncomment that and don't forget to comment in default-color.css to inactive it.

		<!-- COLOR SCHEME -->

		<link rel="stylesheet" href="./assets/css/color/default-color.css"/>
	   <!--<link rel="stylesheet" href="./assets/css/color/color-1.css"/>
		<link rel="stylesheet" href="./assets/css/color/color-2.css"/>
		<link rel="stylesheet" href="./assets/css/color/color-3.css"/>
		<link rel="stylesheet" href="./assets/css/color/color-4.css"/>
		<link rel="stylesheet" href="./assets/css/color/color-5.css"/>
		<link rel="stylesheet" href="./assets/css/color/color-6.css"/>
		<link rel="stylesheet" href="./assets/css/color/color-7.css"/>
		<link rel="stylesheet" href="./assets/css/color/color-8.css"/>-->
	

HTML Code Navigation Bar:

<nav class="navbar navbar-default navbar-fixed-top navigation sticky-navbar">

	<div class="container">

		<div class="navbar-header page-scroll">

			<a href="" class="navbar-brand brand-name"><i class="fa fa-book"></i>Book store</a>


			<button class="navbar-toggle nav-btn" data-toggle="collapse" data-target=".navHeaderCollapse">

				<span class="icon-bar"></span>

				<span class="icon-bar"></span>

				<span class="icon-bar"></span>

			</button>

		</div>


		<div class="collapse navbar-collapse navHeaderCollapse">

			<ul class="nav navbar-nav navbar-right item-link main-navigation">

				<li class="active"><a data-scroll href="#section-1">....</a></li>

				<li><a data-scroll href="#section-2">....</a></li>

				<li><a data-scroll href="#section-3">......</a></li>

				<li><a data-scroll href="#section-4">.....</a></li>

				<li><a data-scroll href="#section-5">......</a></li>

			</ul>

		</div>

	</div>

</nav>

 

HTML Code Navigation Bar:

There are used one background image in HEADER section

Find this image background section in style.css (or style.scss if you love 'scss css') both of the files are well commented.

scss Function and code:

header.header {

	width:100vw;

	height: 760px;

	max-height: 800px;

	background: url('/assets/img/header-img/bg.jpg');

	background-position: center center;

	background-size: cover;

	background-repeat: no-repeat;

}

CSS code Example:

header.header {

	width:100vw;

	height: 760px;

	max-height: 800px;

	background: url('/assets/img/header-img/bg.jpg');

	background-position: center center;

	background-size: cover;

	background-repeat: no-repeat;

}

 

We have used  Font Awesome 4.4.0 throughout the template. So there are 1000+ font icons come with it.

You can see icon mapping directly from icons folder.

Default: MailChimp

Current active subscribe form will save emails to mail chimp list. 

How to connect mail chimp list? 

Open function.js and find following script. Just replace that mailchimp form action url

How to find mailchimp form action URL?

Login to your mailchimp account and go to your list. Now follow the steps bellow:

  1. Select Signup forms
  2. Select Embedded forms 
  3. Copy the link and paste into function.js mailchimp script which is shown on the above image. 
    Note: Don't remove " " from the script and never forget to add http: if it is not included with mailchimp list url.

Changing the location in map is so easy. just follwo the steps. open the function.js file and feel free to change location.

If you need any help. Feel free to contact us anytime. We will reply within 24 hours.

Email: support@deviserweb.com