Thank you very much for purchasing our template! If you have any questions that aren't covered in this documentation, please feel free to email us.
1. Unzip the file and find out the folder nppy. There are all html template files in this folder.
2. Folder Structure is as follows
assets (all assets/required file of this template) --/css (all css files) --/--/colors (all color scheme) --/flexSlider (flexSlider plugin) --/fonts (font-awesome font icon set ) --/img (all images) --/js (all javascript files) --/magnific-popup (plugin for light-box) --/owl-carousel (owl-carousel core files) index.html (Home page)
3. You will need to Upload these files to your Web Server using FTP or cpanel in order to use it on your Website. And other files can be used according to your preferences.
4. Now enjoy the theme and adding section/feature according to your need.
Being based on Bootstrap, Nppy inherits its awesome grid system. It's a responsive, mobile first grid that appropriately scales up to 12 columns as the device or view port size increases.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- meta tag -->
<meta charset="utf-8">
<title>Title goes here</title>
<!-- favicon -->
<link rel="shortcut icon" href="assets/img/ico/favicon.png">
<!--common style-->
...
</head>
<body id="top" >
<!--navbar start-->
<nav class="navbar navbar-transparent navbar-fixed-top navbar-color-on-scroll">
...
</nav><!-- /.navbar -->
<!--navbar end-->
<div class="wrapper">
<div class="header tt-main-header">
...
</div>
<!--body content start-->
<div class="main main-raised">
<div class="container">
<div class="row">
...
</div><!-- /.row -->
</div><!-- /.container -->
</div>
<!--body content end-->
</div><!-- /.wrapper -->
<!--footer start -->
<footer class="footer">
<div class="container">
...
</div>
</footer>
<!--footer end-->
<!-- Preloader -->
<div id="preloader">
<div class="preloader-position">
...
</div>
</div>
<!-- End Preloader -->
<!-- Placed js at the end of the document so the pages load faster -->
....
</body>
</html>
You can find LOGO container into navbar section
<!--logo start--> <a class="navbar-brand" href="index.html"><img src="assets/img/logo.png" alt="Appy Logo"></a> <!--logo end-->
<link href="https://fonts.googleapis.com/css?family=Raleway:400,400i,500,600,700" rel="stylesheet">
font-family: 'Raleway', sans-serif !important;
There are two kinds of font icons used in this template.
Font Awesome is a @font-face iconset that allows you to change size and color of the icons just using CSS.
To add an icon, simply create an empty element with class 'fa fa-[icon name]', for example:
<i class="fa fa-file"></i> <i class="fa fa-home"></i> <i class="fa fa-envelope"></i>
Material Icons
====================
Material icons are beautifully crafted, delightful, and easy to use in your web, Android, and iOS projects, hosted by Google.
Material Icon is also a @font-face iconset that allows you to change size and color of the icons just using CSS.
There are two options to add a material icon in your web site. You can simply add <i class="material-icons">layers</i> icon name with material-icons class. Which is supported by all modern browser.
If you want to show all icons in Internet Explorar 9 or below you should add icons unicode like this <i class="material-icons"></i>
<!-- For modern browsers. --> <i class="material-icons">layers</i> <!-- For IE9 or below. --> <i class="material-icons"></i>
<section class="section-padding">
<div class="container">
<div class="row margin-bottom-80 text-center">
<div class="col-md-8 col-md-offset-2">
<h2 class="title wow fadeInUp">Nppy Benefits</h2>
<div class="section-divider"></div>
<p class="description wow fadeInUp">Nappy app landing page</p>
</div>
</div>
</div><!-- /.container -->
</section>
<section class="section-padding gray-bg">
<div class="container">
</div><!-- /.container -->
</section>
<section class="section-padding filter dark-7 parallax-bg bg-fixed" data-stellar-background-ratio="0.5">
<div class="container">
</div><!-- /.container -->
</section>
For Margin Classes:
.no-margin {
margin: 0;
}
.margin-top-80 {
margin-top: 80px;
}
.margin-bottom-40 {
margin-bottom: 40px;
}
.margin-bottom-60 {
margin-bottom: 60px;
}
.margin-bottom-80 {
margin-bottom: 80px;
}
For Padding Classes:
.no-gutter > [class*='col-'] {
padding-right: 0;
padding-left: 0;
}
.padding-top-100 {
padding-top: 100px;
}
.padding-bottom-100 {
padding-bottom: 100px;
}
Twitter Bootstrap: http://getbootstrap.com/
Material KIT: https://github.com/timcreative/material-kit
Google Fonts: http://www.google.com/webfonts
Font Awesome: http://fontawesome.io/
Material icons: https://design.google.com/icons/
jQuery: https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js
jQuery Easing: http://gsgd.co.uk/sandbox/jquery/easing/
smoothscroll: http://cferdinandi.github.io/smooth-scroll/
countTo: https://github.com/mhuggins/jquery-countTo
stellar: http://markdalgleish.com/projects/stellar.js/
inview: https://github.com/protonet/jquery.inview
owl.carousel: http://owlgraphic.com/owlcarousel/
Image Credits:
================
Unsplash: https://unsplash.com/
Freepik: http://www.freepik.com/
Photos and Videos:
===================
Important!