Thank you for Purchasing



Nirwana - HTML Landing Page Collection

Version 1.0.0

  • Created : 22 Jan 2022
  • Last Update : 22 Jan 2022

What is Nirwana?

banner

Nirwana is a modern, multi-purpose, and clean HTML5 landing page template. It has 11 demos including Agency, Cloud, Cryptocurrency, Education, Medical, Marketing, Fintech, Retail, Saas, Saas version 2 and Social Apps.

Nirvana has full feature like dark mode, 3d vector illustrations, customizable colors and layouts also multi-language and RTL support. Built with Bootstrap, jQuery, Materialize and Gulp, Pug.js, so that make it flexible to use and reusable UI components. This template is very well documented and also have proper files and folders structure.

So this template is a simply better choice for your website. Your search for the best solution is over, get Nirwana now to smoothness your business.

Template Feature

HTML5 + jQuery version

  • 11 landing page templates. Built with one of most popular and flexible javascript library jQuery, Bootstrap, MaterializeCSS (Material Design) and Pug.js for HTML template engine.
  • Various modern design Agency, Cloud, Cryptocurrency, Education, Medical, Marketing, Fintech, Product-Sales, Saas, Saas2 and Social Apps.
  • Premium designs. Simple and elegant multi color scheme
  • Easy integration and modification Write in HTML5, JS and SCSS, and also can generate dynamic HTML content and layout with Pug.js and Gulp.js
  • More Variant Components. This template including 7 Header type and 4 Footer type, plus Scroll Page Navigator and Chat Panel.
  • Dark Mode. Creative and modern design along with dark mode to make it easy on your eyes.
  • Modern Illustration. The most trending design concept, with artwork illustration to increase visitor attractiveness.
  • RTL Support. RTL adjustment styling with rtl-saas.
  • Support multilanguage. Including 6 translation English, Deutsch, Arabic, Chinese, Bahasa Indonesia, and 󠁥󠁮󠁧󠁿Português.
  • 100+ Pug.js section components and UI modules which reusable and easy to modify.
  • Responsive design Based on standard 12 Grid System
  • Starter Project. Build app from scratch without without being distracted from innate feature.
  • Support mono repo . Modern architecture to managing modules in multiple project.
  • Fully vector icons and font icons.
  • And many more...

Folder Structure

├── packages
│   └── [theme-name]
│       ├── README.md
│       ├── assets/
│       ├── index.html
│       ├── about.html
│       ├── about-team.html
│       ├── blog.html
│       ├── detail-blog.html
│       ├── login.html
│       ├── register.html
│       ├── contact.html
│       ├── contact-map.html
│       ├── collection.html
│       ├── product.html
│       ├── product-detail.html
│       ├── pricing.html
│       ├── faq.html
│       ├── maintenance.html
│       ├── coming-soon.html
│       ├── 404.html
│       ├── crossdomain.xml
│       ├── gulpfile.js
│       ├── humans.txt
│       ├── multilang/
│       ├── package-lock.json
│       ├── package.json
│       ├── robots.txt
│       └── src/

Install NPM

This template has include the 3rd party plugins and libraries in assets/[css,js]/vendors/ But in modern development exclude 3rd party packages from project and use package manager like npm or yarn to install them. To begin installation please follow this guide bellow:
  • Connect to the internet
  • Install NodeJs from NodeJs Official Page
  • Unzip the Nirwana file to a folder in your computer
  • Open Terminal
  • Go to your file project (where you've unzipped the product)
  • Go to packages and choose a template. Example packages/agency/
  • Install Modules
    Install module dependencies by run this script in terminal 
    npm install
    It will download some necessary dependencies, and just wait until finish.
    process
  • For installation by use lerna, please check this link Installation using lerna

Installation With Lerna

Lerna is A tool for managing JavaScript projects with multiple packages. This template has 11 packages(projects) inside packages/ folder. So to install them at once you can use lerna. See full docs of lerna here https://github.com/lerna/lerna. Here's the installation guide:

  • Let's start by installing Lerna globally with npm: 
    npm install --global lerna
  • Go to your root project (where you've unzipped the product)
  • Then install all packages 
    lerna bootstrap
    Note: This process will take a few minutes, because there's lot of modules to be installed. If got stuck for this step. Please install the packages(projects) one by one by use npm install instead.

Use HTML, CSS, JS

View and Edit HTML

  • After extract the package just open the HTML file in packages/[theme-name]/[file.html]
  • In example packages/agency-theme/index.html
  • To view it you can open in browser
  • To edit it you can open in text editor (sublime, visual studio code, atom, bracket, etc). After edit and save, please open or reload in browser to see the changes

Change HTML layout and theme

To change HTML layout and theme is applicable in every .html file

  • RTL and LTR layout:
    1. In html file change the dir and lang attribute in body tag
      - LTR 
      <html lang="en" dir="ltr">
      - RTL 
      <html lang="ar" dir="rtl">
    2. Change the css vendor framworks, which are bootstrap.css and materialize.css with rtl version 
      <link href="assets/css/rtl-vendors/bootstrap-rtl.css" rel="stylesheet">
<link href="assets/css/rtl-vendors/materialize-rtl.css" rel="stylesheet">
    3. Note: if you add another css plugin that need transform to rtl verion. Please visit https://rtlcss.com/
  • Theme Color
    1. In html file just change the class name
    2. For dark/light mode in .m-application by switch between .theme--dark or .theme--light
      - Dark mode: 
      <div class="m-application theme--dark transition-page" id="app">
      - Light mode: 
      <div class="m-application theme--light transition-page" id="app">
    3. For theme color in .m-content by change .[theme-name]-var with available theme from src/scss/utils/_color-var.scss - In example joker theme color 
      <div class="m-content green-leaf joker-var" id="main-wrap">

Edit CSS and JS

This template use SCSS to create CSS by Gulp.js. More than that Gulp.js also use for merge css and js files to a single file.

We recommend to do not edit files: assets/css/styles.css and assets/js/scripts.js Because those are generated files, and will be replaced automatially by gulp.js. Please edit from the source in src/ folders
  • To add or modify css, please open src/scss/. If you add new scss files, don't forget to register it in src/scss/styles.scss
  • To add or modify js, please open src/js. If you add new js files, You don't need register it, it will automatically merge in assets/js/scripts after run gulp command bellow.
  • To build the js and css assets run 
    gulp assets
    and for watch the changes 
    gulp watch_assets
  • The result will be placed in:
    - CSS: assets/css/styles.css
    - JS: assets/js/scripts.css

Use HTML in different language

  • After extracting file, there will be multilang/ folder in packages/[theme-name]. Most of the text content is appropriate for that's language
  • In example for site with Bahasa Indonesia packages/agency-theme/multilang/id/index.html
  • To view it you can open in browser
  • To edit it you can open in text editor (sublime, visual studio code, atom, bracket, etc). After edit and save, please open or reload in browser to see the changes
  • The rest modification such as theme, js and css are same as described above.

Use HTML with custom components

This template coming with 7 variant headers, 4 variant footers and 2 type bottom corner. You can find them in packages/[theme-name]/custom-components/

The Implementation to other pages need to do manually to every HTML file. Please see the following steps below:

  • Example for change theHeader with header-droplist, open custom-components/header-droplist.html
  • Find the element with id="header" and select then copy that code
  • Pick your target pages and open it. Find the element with id="header" and select then paste the code. It will replace the previous header with header-droplist
  • And for mobile menu navigation, the element is id="slide_menu". You can copy and paste to another pages same as above method.
  • For Footer and Corner nav, basically has te same method. The important thing just replace with same level hirearchy of element

Header


// Open File index.html (or other HTML files)
<header class="app-bar header" id="header"> Header Default(Mixed) content </header>

// Replace header with custom-components/header-dropllist.html
<header class="app-bar header" id="header"> Header Droplist content </header>

Mobile Navigation


// Open File index.html (or other HTML files)
<div class="sidenav mobile-nav" id="slide_menu"> Mobile Nav Default (Mixed) </div>

// Replace mobile nav with custom-components/header-megamenu.html
<div class="sidenav mobile-nav" id="slide_menu"> Mobile Nav Mega Menu </div>

Footer


// Open File index.html (or other HTML files)
<footer class="footer-sitemap"> Footer default content (Sitemap) </footer>

// Replace footer with custom-components/footer-blog.html
<footer class="footer-blog"> Footer Blog content </footer>

Corner


// Open File index.html (or other HTML files)
<div class="chat">
  <div class="panel" id="chat_panel"> 
    Page Nav Component
  </div>
</div>

// Replace Corner with custom-components/corner-nav.html
<div class="page-nav" id="page_nav"> Page Nav Component </div>

Troublehooting

Here's most common error problem when installation and first setup project

  • if got warning like this :
    
npm WARN slick-carousel@1.8.1 requires a peer of jquery@>=1.8.0 but none is installed. You must install peer dependencies yourself.
    Don't worry the app will run as well

    For warning some of dependencies need another dependencies too, maybe once you install them, there’s some changes from the 3rd party vendor so probably it will make a warning to another dependencies.

  • if got an error with a dependencies installation. Try to remove the all module node_modules/. Then install again with npm install. If error still happen, please try to remove the problematic package node_modules/ foler. After that try to install the problematic package manually. npm install ‹package_name› --save-dev
  • if still got an error. Try to update the problematic package instead.
  • If you get error messages when start project npm run dev like this
    ERROR in ./app/styles/layout/base.scss (./node_modules/css-loader/dist/cjs.js??ref--8-1!./node_modules/postcss-loader/src??ref--8-2!./node_modules/sass-loader/lib/loader.js??ref--8-3!./app/styles/layout/base.scss)
Module build failed (from ./node_modules/sass-loader/lib/loader.js):
  • It's mean the node-sass not installed succesfully. May because connection problem, changed node environment during installation, or blocked node-sass repository
  • Please install node-sass manually by npm install node-sass --save
  • Try to start project again npm start
  • You will get this warning message if not use HTTPS 
    A cookie associated with a resource at http://doubleclick.net/ was set with `SameSite=None` but without `Secure`. A future release of Chrome will only deliver cookies marked `SameSite=None` if they are also marked `Secure`. You can review cookies in developer tools under Application>Storage>Cookies and see more details at https://www.chromestatus.com/feature/5633521622188032.
    Here's the guide to setup HTTPS:


Basic Code Structure

Folder structure

template-theme                                                                          
├── 404.html
├── README.md
├── assets
│   ├── css
│   ├── favicon.ico
│   ├── favicons
│   ├── images
│   └── js
├── blank-page.html
├── contact.html
├── crossdomain.xml
├── gulpfile.js
├── humans.txt
├── index.html
├── multilang
│   ├── ar
│   ├── de
│   ├── en
│   ├── id
│   ├── pt
│   └── zh
├── package-lock.json
├── package.json
├── robots.txt
└── src
    ├── api.json
    ├── js
    ├── locales
    ├── pug
    └── scss

Code preview



Landing Page

Landing page structure src/pug/pages/index.pug and index.html

code

Header

You can put google analytics, font icon, embeded fonts, etc here: src/pug/layout/document.pug and index.html

code2

SCSS

/src/scss/styles.scss

code2


Directory and File

Name Directory Description Sample Use
Pug.js UI Components src/pug/components/ Modular HTML components written in pug.js include ../components/parallax/dot.pug
Images assets/images Store static images - HTML
<img src="assets/images/agency-logo.svg" alt="logo" />
- PUG
img(src=assets+"/images/agency-logo.svg" alt="logo")/
- SCSS/CSS
background-image: url(../images/agency-logo.svg)
SCSS src/scss Output destination: assets/css/styles.css @import './components/expertise';
JS src/js Output destination: assets/js/scripts.js Just create file in src/js then run gulp assets to merge in to assets
Dummy text and link src/api.json It use for pug.js only span #{brand.agency.name}



Template Architecture

This is template architecture in diagram visualization. Click diagram or full screen button full screen to show in new tab with full screen

HTML and SCSS Generated by Gulp.js

Before work with the tasks bellow, please install all necessary packages by run npm install

  1. Build all files

    Source Result
    src/pug/pages/*.pug *.html
    src/scss/styles.scss assets/css/styles.css
    src/js/*.js assets/js/scripts.js

    This command use for build static HTML (converted from Pug.js exclude multi-language), scss and merge js

    gulp build

  2. Watch all files files

    Source Result
    src/pug/pages/*.pug *.html
    src/scss/styles.scss assets/css/styles.css
    src/js/*.js assets/js/scripts.js

    This command use for watch changes of static HTML (converted from Pug.js, exclude multi-language), scss and js

    gulp
    It will open the page in default browser automatically in port 900x. For example agency-theme will run in port:9001

  3. Build assets only

    Source Result
    src/scss/styles.scss assets/css/styles.css
    src/js/*.js assets/js/scripts.js

    This command use for watch changes of scss and js

    gulp assets

  4. Watch assets only

    Source Result
    src/scss/styles.scss assets/css/styles.css
    src/js/*.js assets/js/scripts.js

    This command use for watch changes of scss and js

    gulp watch_assets
    It will open the page in default browser automatically in port 900x. For example agency-theme will run in port:9001

  5. Translate

    Source Result
    src/pug/pages/*.pug mutlilang/[lang]/*.html

    This command use generate multi-language HTML. It's uses locale files from src/locale/*.json as translated library and generated by pugI18n

    Pug setup required, please change base.pug before run gulp command
    src/pug/layouts/base.pug 
    
//- Available env: dev, prod, and node_modules
- var env = 'dev'

//- HTML attribute
- var doc_lang = 'en'
- var doc_dir = 'ltr'

//- Assets Path
- var multilang = '../../assets'
- var prod = '../assets'
- var dev = './assets'

//- Use assets path
- var assets = multilang // Change this
    In Console/Terminal 
    gulp translate
    The generated result will be placed in multilang/[lang]/*.html. For example for template with Bahasa Indonesia multilang/id/index.html

  6. Translate RTL

    Source Result
    src/pug/pages/*.pug mutlilang/ar/*.html
    src/assets/css/vendors/ src/assets/css/rtl-vendors/

    The gulp translate command is not make layout switched to RTL. You need run this command to generate multi-language HTML with RTL layout. It's uses locale files from src/locale/ar.json as translated library and generated by pugI18n

    Pug setup required, please change base.pug before run gulp command
    src/pug/layouts/base.pug 
    
//- Available env: dev, prod, and node_modules
- var env = 'dev'

//- HTML attribute
- var doc_lang = 'ar' // Change this       
- var doc_dir = 'rtl' // Change this       

//- Assets Path
- var multilang = '../../assets'
- var prod = '../assets'
- var dev = './assets'

//- Use assets path
- var assets = multilang // Change this
    In Console/Terminal 
    gulp build
    gulp translate_rtl
    The generated result will be placed in multilang/ar/*.html. If you have new languge with RTL required, it will placed on multilang/[new-lang]/index.html

  7. Build Production

    Source Result
    mutlilang/[lang]/*.html dist/[lang]/*.html
    src/assets/css/ dist/assets/css/
    src/assets/js/ dist/assets/js/
    src/assets/img/ dist/assets/img/

    This command is usually used for production purpose which is generate minified css, js even html.

    Pug setup required, please change base.pug before run gulp command
    src/pug/layouts/base.pug 
    
//- Available env: dev, prod, and node_modules
- var env = 'prod' // Change this       

//- HTML attribute
- var doc_lang = 'en'
- var doc_dir = 'ltr'

//- Assets Path
- var multilang = '../../assets'
- var prod = '../assets'
- var dev = './assets'

//- Use assets path
- var assets = prod // Change this
    In Console/Terminal 
    gulp build
    gulp translate
    gulp translate_rtl
    gulp prod
    The generated result will be placed in dist/.

Pug.js Coding

Follow this guide bellow to modify user interface, create pages, branding identity, language, etc.
Create New Page and Component
Brand/Project Name
Navigation Menu
Youtube Config
Change Layout(RTL) and Theme
Set Language

External Reference

Here's some external reference of library that we used


Fonts Used



roboto font

Icons Used

Material Font Icons

  • Please make sure Google Material Icons already embeded in head tag
    If not just embed this inside head tag 
    <head>
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"/>
</head>
  • Connect to internet
  • Then use it inside Vue templates. Example for use add icon 
    <i class="material-icons">add</i>
  • Here's the cheatsheet for Material Icon https://materializecss.com/icons.html




IonIcons Font

  • Please make sure IonIcons already embeded in head tag.
    If not just embed this inside head tag 
    <head>
    <link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" />
</head>
  • Connect to internet
  • The sample usage 
    <span class="ion-ios-world-outline" />
  • Here's the ionicons cheatsheet https://ionicons.com/v2/cheatsheet.html

    • Sources and Credit

    Fonts :
    Roboto, Robot Condensed, Lato, Open Sans, Montserrat

    Preview Images Used
    Unsplash
    Pixabay
    randomuser.me

    Note: All images are just used for Preview Purpose Only. They are not part of the template and NOT included in the final purchase files.


    Credits
    Name Repository License
    materializecss https://github.com/Dogfalo/materialize MIT
    animate.css https://www.npmjs.com/package/animate.css MIT
    jQuery https://github.com/jquery/jquery MIT
    Bootstrap https://github.com/twbs/bootstrap MIT
    Pug.js https://github.com/pugjs/pug MIT
    node-sass https://www.npmjs.com/package/node-sass MIT
    gulp.js https://github.com/gulpjs/gulp MIT
    gulp-pug https://github.com/gulp-community/gulp-pug MIT
    gulp-i18n-pug https://github.com/felixzapata/gulp-i18n-pug MIT
    gulp-saas https://github.com/dlmanning/gulp-sass MIT
    rtl-sass https://www.npmjs.com/package/rtl-sass ISC
    jquery-navScroll https://github.com/jhammann/jquery-navScroll MIT
    slick https://github.com/kenwheeler/slick/ MIT
    wow.js https://github.com/graingert/wow MIT
    jQuery Youtube Background https://github.com/rochestb/jQuery.YoutubeBackground MIT
    gulp-rtlcss https://github.com/jjlharrison/gulp-rtlcss MIT
    jQuery form validator https://github.com/victorjonsson/jQuery-Form-Validator Dual licensed under the MIT or GPL Version 2 licenses

    Online Suport

    If you have any questions about customization of this template wich are not covered in the documentation feel free to ask a question in the comment section or contact me directly via e-mail form on my profile page.

    A product by Ilham Meidi Brata



    Enjoy and don’t forget to rate my template.

    Thank you very much!

    Change Log

    Version 1.0 – 22 Jan, 2022
    Nirwana released