Nppy Documentation

Nppy Material Design App Landing Page

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.

Nppy - Material design app landing page, it is all about promoting your App. Nppy is the perfect mobile app showcase for iPhone and Android.  It's comes with 6 pre-defined color scheme.
Nppy is well organized and very easy to customize. Promote your app with Nppy app landing page.
Nppy is fully responsive and built with bootstrap framework, be sure that it will fit any viewing device.
Let's have a quick look on features that Nppy have:

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">
    <!--  meta tag -->
    <meta charset="utf-8">
    <title>Title goes here</title>
    <!--  favicon -->
    <link rel="shortcut icon" href="assets/img/ico/favicon.png">    
    <!--common style-->

<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">

    <!--body content start-->
    <div class="main main-raised">
        <div class="container">
            <div class="row">
            </div><!-- /.row -->
        </div><!-- /.container -->
    <!--body content end-->
</div><!-- /.wrapper -->

    <!--footer start -->
    <footer class="footer">
        <div class="container">
    <!--footer end-->

    <!-- Preloader -->
    <div id="preloader">
        <div class="preloader-position"> 
    <!-- End Preloader -->

<!-- Placed js at the end of the document so the pages load faster -->



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-->
You can use any kind of logo adjusting with Navigation Bar.
Nppy uses google font. So you can feel free to use any google font what you like best.
Nppy  used "Roboto" google font for heading/title and "Raleway" for body text.
You can find the Link to the <head>  tag of all the .html files like this
<link href=",400i,500,600,700" rel="stylesheet">
And you have to add the font name into css file like 
font-family: 'Raleway', sans-serif !important;

There are two kinds of font icons used in this template.

  1. FontAwesome
  2. Material Icon

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">&#xE53B;</i>  

<!-- For modern browsers. -->
<i class="material-icons">layers</i>

<!-- For IE9 or below. -->
<i class="material-icons">&#xE53B;</i>


For IE9 compatibility reason we used second option(with Unicode). You can simply use the first option. 
Here you will get 900+ Material Icons and it's unicodes. 
Just click on a icon, a popup window will appear from bottom then click on  ICON FONT from right top corner you will get both versions of each icon.


The standard page section has the following... 
<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><!-- /.container --> 


Section Background color change
You can change the section background color. like gray-bg/dark-bg.
For gray background color please add extra class name gray-bg  and For dark background color add class name dark-bg .
<section class="section-padding gray-bg">
    <div class="container">

    </div><!-- /.container -->


Parallax Section
For parallax section add class name parallax-bg  and bg-fixed and chose a banner number for background image from css.  Add data-stellar-background-ratio="0.1 to 0.9"
You can change background Image from CSS.
<section class="section-padding filter dark-7 parallax-bg bg-fixed" data-stellar-background-ratio="0.5">
    <div class="container">

    </div><!-- /.container -->
We have created some useful helper classes for you. Here are a few of them:

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

Material KIT:



Google Fonts:

Font Awesome:

Material icons:




jQuery Easing:







Image Credits:





Photos and Videos:


The images used on the demo site are for demonstration purposes only and are not included in the download file. We have included placeholder images for each instance.
Once again, thank you very much for purchasing this template;  we'll be glad to help you if you have any questions.
If you have a more general question relating to the templates on ThemeForest, please consider visiting the forums and asking your question in the "Item Discussion" section.
Trendy Theme Team :)