Content Overview

Download File Content List

  • Unsplash HD Gallery
  • NothingToChance Free Gallery
  • Gratisography Unique Images

Quick Start Guide

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.

Platform Installation and Setup

Follow the steps below to setup your site template:

  1. Unzip the downloaded archive and open the "HTML" folder to find all template files. Upload these files to your website server using FTP.
  2. The following is the folder structure that needs to be uploaded 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 HTML files or a portion of them as needed.
  4. Now you can add content and images to create a brand new, exciting website for your users!

Page Structure Analysis

HTML File Structure Explanation

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
      • Owl Carousel CSS
      • Owl Carousel Default Theme CSS
      • Responsive Layout CSS
      • All Necessary CSS Files Merged and Minified
    • Fonts
    • Media Files Storage (Logo, Images, Videos, etc.)
    • js
      • Navigation Menu JavaScript
      • Bootstrap Core JavaScript
      • Block Height Adaptive JavaScript
      • MixItUp Dynamic Content Filtering
      • Animation Trigger Effects
      • jQuery Easing Animations
      • Magnific PopupLightbox
      • Core jQuery Library
      • Modernizr Browser Detection
      • Owl Carousel Image Slider
      • WOW.js Animation Library
      • Loading Progress Bar
      • Isotope Responsive Grid
      • ImagesLoaded Image Loading Status
      • CountTo Number Animations
      • All JavaScript Minified
      • Custom Script Configuration
  • Homepage
  • Home Page Layout
  • ...
  • CSS Stylesheet Files

Customization

Please read the following information carefully

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>

Font Style Adjustment

How to change logo

华体

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 Notice

The 华体 platform uses Manrope and Roboto fonts from the Google Fonts library. You can modify them with the following 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');
                    

Acknowledgements

Read The following information Carefully

  • Website fonts are from Google Fonts and may display differently in offline mode.
  • 如需更多定制帮助,请发送邮件至 [email protected]
  • Please provide your proof of purchase, such as order number or account screenshot, before submitting a support request.

credits

We are grateful for the resources and tools that have helped the 华体 platform, making it more excellent and providing an exceptional user experience.

Images and video

JS Libraries

  • jQuery Core Library
  • HTML5 Compatibility Handling
  • Modernizr Feature Detection
  • jQuery Easing Animation Library
  • Page Smooth Scrolling Effect
  • jQuery Appear Element Visibility Trigger
  • Bootsnav Responsive Navigation
  • WOW.js Scroll Animations
  • CountTo Number Counting Animations
  • Magnific Popup Lightbox
  • Equal Height Layout Plugin
  • Owl Carousel Slider Component

CSS & Fonts

  • Bootstrap Frontend Framework
  • Various Animation Effects
  • Font-Awesome Icon Set
  • Flaticons Exquisite Icons
  • Google Fonts Library
京ICP备18106878号
华体 Technology Co., Ltd.Your trusted partnerPhone:+86 150 3454 4774Email:[email protected]Hours:7×24781 Tianhe North Road, Tianhe District, Guangzhou City
📍 View location on Baidu Maps