Detailed Explanation of Core Features

File Content Description

  • Unsplash Gallery Resources
  • NothingToChance Gallery
  • Gratisography Gallery

NG28 Platform Overview

Note: This is not a WordPress theme, and it wont install like a WordPress theme, this is a HTML5 template (static website).

Softar is a Responsive Software Landing Page HTML5 Template that comes with 10+ pages and 5 home page variations. Softar is a graphically polished, interactive, easily customizable, highly modern, fast loading, search engine optimized, efficiently coded, well documented, vibrant and fully responsive HTML5 and CSS3 Software Landing Page template specifically for , software , start-ups and mobile apps, Automotive site or your just a Blog

To edit this template with your info you will need a code editor, i use Sublime Text (http://www.sublimetext.com/3) and a browser i recommend to use Google Chrome.

It is really easy to use. There is multiple home page layouts to chose, also various selection of pages that you can use to create your website, but you can also create your own page layouts very easily (just copy and paste code form the elements examples).

When you start editing the template with your info is good idea to create separate folder, copy the assets folder and 404.html page there, rename one of the index... files to index.html and then move and edit pages that you will use. Also is good practice to create separate styleseet for your edits and load it bellow Softar CSS.

Quick Start Guide

Follow the steps below to setup your site template:

  1. Unzip the downloaded archive, open the "HTML" folder to find all template files. Upload these files to your website server via FTP for use.
  2. Here is the folder structure you need to upload to your website's root directory: HTML/css - Stylesheet files HTML/fonts – Icon font files HTML/img - Image files HTML/js - JavaScript files
  3. You can upload all or part of the HTML files according to your project needs.
  4. You can now start adding content and beautiful images to create a brand new, engaging website for your users!

Platform Technical Architecture

HTML File Structure Analysis

Once you download the template, you can see a folder with several files and sub folders. You can read description of some important files in continue.

  • assets
    • css
      • Animation Effects CSS
      • Navigation Menu CSS
      • Bootstrap Core CSS
      • FontAwesome Icons CSS
      • Themify Icons CSS
      • Popup Window CSS
      • Carousel Component CSS
      • Carousel Component Default Styles
      • Responsive Design CSS
      • Core CSS Plugin Collection
    • Font Settings
    • Used to store media files such as Logos, images, videos, etc.
    • js
      • Navigation Menu JavaScript
      • Bootstrap Core JavaScript
      • Block Height Adaptive JavaScript
      • Mixitup: Dynamic Content Layout Plugin
      • Element Enter Animation
      • Easing Functions Library
      • Magnific Popup: Responsive Modal Component
      • jQuery: Core JavaScript Library
      • Modernizr: Frontend Feature Detection
      • Owl Carousel: Responsive Image Carousel
      • WOW.js: Trigger Animations on Scroll
      • Progressbar: Progress Bar Component
      • Isotope: Responsive Masonry Layout
      • ImagesLoaded: Image Load Status Listener
      • CountTo: Number Counter Animation
      • Core Plugins and Toolset
      • Custom Script Tools
  • Home
  • Platform Homepage
  • ...
  • Style Guide

Customization

Important Information Reading Notice

Softar follows a simple and easy to customize coding structure. Here is the sample for your reference:


<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Softar - Software Landing Page Template</title>

    <!-- ========== Start Stylesheet ========== -->
    <link href="assets/css/bootstrap.min.css" rel="stylesheet">
    <link href="assets/css/font-awesome.min.css" rel="stylesheet">
    <link href="assets/css/themify-icons.css" rel="stylesheet">
    <link href="assets/css/magnific-popup.css" rel="stylesheet">
    <link href="assets/css/owl.carousel.min.css" rel="stylesheet">
    <link href="assets/css/owl.theme.default.min.css" rel="stylesheet">
    <link href="assets/css/animate.css" rel="stylesheet">
    <link href="assets/css/bootsnav.css" rel="stylesheet">
    <link href="assets/style.css" rel="stylesheet">
    <link href="assets/css/responsive.css" rel="stylesheet">
    <link href="style.css" rel="stylesheet">
  </head>
  

  <body>

    <!-- Start Navigation -->
    <nav class="navbar navbar-default navbar-fixed white no-background bootsnav">

    </nav>
    <!-- End Navigation-->


    <!-- Start Main
    ============================================= --->
    <main>

    </main>
    <!-- END Main Content -->


    <!-- Star Footer
    ============================================= -->
    <footer>

    </footer>
    <!-- End Footer -->


    <!-- jQuery Frameworks
    ============================================= -->
    <script src="assets/js/jquery-1.12.4.min.js"></script>
    <script src="assets/js/bootstrap.min.js"></script>
    <script src="assets/js/jquery.appear.js"></script>
    <script src="assets/js/jquery.easing.min.js"></script>
    <script src="assets/js/jquery.magnific-popup.min.js"></script>
    <script src="assets/js/modernizr.custom.13711.js"></script>
    <script src="assets/js/owl.carousel.min.js"></script>
    <script src="assets/js/wow.min.js"></script>
    <script src="assets/js/progress-bar.min.js"></script>
    <script src="assets/js/isotope.pkgd.min.js"></script>
    <script src="assets/js/imagesloaded.pkgd.min.js"></script>
    <script src="assets/js/count-to.js"></script>
    <script src="assets/js/bootsnav.js"></script>
    <script src="assets/js/custom.js"></script>

  </body>
</html>

Interface Style Customization

How to change logo

ng28

How to change favicon

Thumb

How to change page title

Thumb

How to Change Banner Text & Background

Banner One

Thumb

Banner Two

Thumb

How to change Team Section

Thumb

How to change testimonial Section

Thumb

How to Change Breadcrumb

Thumb

How to Add/Remove Footer Bottom

Thumb

How to change contact form email

Thumb

How to control Fun Factor

Thumb

How to control Owl Carousel

Thumb

How to control Preloader

Thumb

How to Add/Remove CSS

Thumb

How to Add/Remove JS

Thumb

Important Tips and Instructions

The NG28 platform integrates Manrope and Roboto fonts from the Google Fonts library by default. You can easily change fonts by modifying the relevant code.

 @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400&display=swap');
                    

Copyright and Legal Information

Read The following information Carefully

  • The platform uses Google Fonts to optimize loading speed and visual consistency.
  • If you have any questions, please feel free to contact our professional customer service team.
  • To ensure service quality, please provide your user ID or relevant credentials.

credits

We would like to express our special thanks to the various high-quality resources that supported the development of the NG28 platform. They have collectively built the excellent digital entertainment experience we present to our users.

Images and video

JS Libraries

  • jQuery Base Library
  • HTML5 Standard Compatibility
  • Modernizr Feature Detection
  • jQuery Easing Effects
  • Smooth Scrolling Effect
  • jQuery Enter Animation
  • Bootsnav Navigation Component
  • WOW.js Animation Library
  • jQuery Number Counter
  • Magnific Popup Modal
  • Equal Height Layout Solution
  • Owl Carousel

CSS & Fonts

  • Bootstrap Framework
  • Rich Animation Effects
  • Font-Awesome Icons
  • Flaticons Icon Set
  • Google Fonts
NG28 Digital Entertainment Technology Co., Ltd.Phone:+86 150 3112 8304