Introduction

Welcome to NioLand - SaaS & App Landing Page HTML Template

NioLand - is a responsive website template. It is fully flexible user-friendly and responsive template that looks great on Desktops, Tablets, and Mobile Devices. this template built with Boostrap 5, HTML5, CSS3, Vanilla Js and SASS. It includes 20+ Homepage, and 45+ pre-built inner pages. this template built with well organized folder structure, clean & commented code.

If you want to create a website like SaaS, StartUp, and Tech, then you are at the right place buy NioLand website template and build your own dream. We have used gulp-based build tools and scss variables-based modes. You can quickly change the colors, font sizes, etc. in variable file. We already designed it and you can easily design your website just how you like it.

If you like our template. please don't forgot to rate it. Thank you so much!

Key Features:

  • 20+ Homepages
  • 45+ Total Pages
  • 120+ Elements
  • Fully Responsive
  • Clean & Modern Design
  • Free Updates & Developer Friendly
  • Multipurpose Reusable Landing Page

Quick Start - with Gulp Workflow

If you want pre-build dist package then you can simply use /html folder as dist copy and you can directly work on that. But if you want change scss or js source file then you need to install node and use gulp command line.
Installing Node.js
  • 1. Download the latest theme source from themeforest.
  • 2. Download and install Node.js from nodejs.org (if you dont have it installed)
  • 3. Start command prompt window or terminal and change directory to [ nioland-template ] folder. 
  • cd [ nioland-template-folder-name ]
  • 4. Run following command to install all the "dependencies and devDependencies". It could take few minutes to complete installation.
  • npm install
  • 5. Run the following command to compile all the assets(sass, js, media) and copy HTML templates to a new folder called [dist] in same directory. 
  • gulp build
  • 6. After you finished with above steps, run the following command to compile scss into css. it will keep running watch command to compile you edit. 
  • gulp develop

File and Folder Structure

    
    |--docs/
    |--nioland-html/
    |--|--html/
    |--|--|--index.html
    |--|--|--index-saas.html
    |--|--|--[other-pages].html
    |--|--|--assets/
    |--|--|--|--css/
    |--|--|--|--|--style.css
    |--|--|--|--|--style-saas.css
    |--|--|--|--|--theme.css
    |--|--|--|--fonts/
    |--|--|--|--images/
    |--|--|--|--js/
    |--|--|--|--|--bundle.js
    |--|--|--|--|--scripts.js
    |--|--|--images/
    |--|--|--|--avatar/
    |--|--|--|--logo.png
    |--|--|--form/
    |--|--|--|--message-form.php

    |--|--src/
    |--|--|--assets/
    |--|--|--|--fonts/
    |--|--|--|--images/
    |--|--|--|--js/
    |--|--|--|--|--vendors/
    |--|--|--|--|--script.js
    |--|--|--|--|--bundle.js
    |--|--|--|--scss/
    |--|--|--|--|--|--core/
    |--|--|--|--|--|--extend/
    |--|--|--|--|--|--|--bootstrap/
    |--|--|--|--|--|--vendors/
    |--|--|--|--|--_variables.scss
    |--|--|--|--|--_variables-[other-variables].scss
    |--|--|--|--|--style.scss
    |--|--|--|--|--style-[other-styles].scss
    |--|--|--|--|--theme.scss
    |--|--gulpfile.js
    |--|--package.json

HTML structure

This is a basic HTML Structure.

    
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="author" content="Softnio">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="shortcut icon" href="/images/favicon.png">
        <title>NioLand || Website Tagline</title>
        <link rel="stylesheet" href="/assets/css/style.css?v1.0.0">
    </head>
    <body class="nk-body" data-navbar-collapse="xl">
        <div class="nk-app-root">
            <header class="nk-header">

            </header><!-- .nk-header -->
            <main class="nk-pages">
                <section class="section section-space">
                    <div class="container">

                    </div><!-- .container -->
                </section><!-- .section -->
            </main>
            <footer class="nk-footer">

            </footer><!-- .nk-footer -->
        </div>
        <script src="/assets/js/bundle.js?v1.0.0"></script>
        <script src="/assets/js/scripts.js?v1.0.0"></script>
    </body>
</html>

SCSS

We have created all the scss files in the src/scss folder.

File Structure
    
    |--html/
    |--|--src/
    |--|--|--scss/
    |--|--|--|--core/
    |--|--|--|--|--_style.scss/
    |--|--|--|--extend/
    |--|--|--|--|--bootstrap/
    |--|--|--|--vendors/
    |--|--|--|--_variables.scss/
    |--|--|--|--_variables-[other-variables].scss/
    |--|--|--|--style.scss/
    |--|--|--|--style-[other-styles].scss/

Editing style css is not recommended if you are not that expert at css , just create another new file and include that in your html file

Javascript

We have added all js files inside the src/js/bundle.js file. and our custom javascript code inside the src/js/script.js file.

File structure
    
    |--html/
    |--|--src/
    |--|--|--js/
    |--|--|--|--bundle.js
    |--|--|--|--scripts.js

If you are not familiar with javascript, then it is hightly recommended do not make any changes to core JS files. because it may get error if you make any changes inside the core js files.

It is recommended to write your JS code, then create a new js file in js folder. and write your own javascript code.

How to Set Edit PHP Files for Working Form

First open the php file located into form folder. Files are 'message-form.php', 'subscribe.php'. On the file you will find bellow code. Just update your sitename, your email and name. If you want to add multiple email then just duplicate the line '$emailTO[] = array...' and add another email.


  ### Enter Your Sitename 
  $sitename = 'Your Sitename';

  ### Enter your email addresses: @required
  $emailTO[] = array( 'email' => 'email@yoursite.com', 'name' => 'Name' );

If you want to add CC email address then just enable below line and update same way as email too.

    
  //$emailCC[] = array( 'email' => 'email@yoursite.com', 'name' => 'Your Name' );

If you want to use SMTP, please enable bellow line of code and upate with your smtp information.

    
  // $mail->isSMTP();
  // $mail->SMTPDebug = 0;
  // $mail->Host = 'smtp_host';
  // $mail->Port = 587;
  // $mail->SMTPAuth = true;
  // $mail->Username = 'smtp_username';
  // $mail->Password = 'smtp_password';