Core Features Overview

Download File Structure Explained

  • Unsplash Gallery
  • NothingToChance Gallery
  • gratisography.com Gallery

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.

Installation & Deployment

Follow the steps below to setup your site template:

  1. Unzip the downloaded archive and open the 'HTML' folder to find all template files. You will need to upload these files to your website server using FTP.
  2. The following is the folder structure 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 or part of the HTML files as needed.
  4. Now you can start adding content and images to create a brand new, exciting website for your users!

Page Structure Analysis

HTML File Structure Overview

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 CSS
      • Navigation CSS
      • Bootstrap Minified CSS
      • FontAwesome Icons CSS
      • Themify Icons CSS
      • Modal Window CSS
      • Carousel Minified CSS
      • Carousel Default Theme CSS
      • Responsive Layout CSS
      • Minified versions of all essential CSS files
    • Fonts
    • Location for media assets like logos, images, and videos.
    • js
      • Navigation JS
      • Bootstrap Minified JS
      • Equal Column Height JS
      • Dynamic Filtering with MixItup
      • Viewport Animation
      • jQuery Easing Effects
      • Responsive Image Lightbox
      • Core JavaScript Libraries
      • Modern Browser Feature Detection
      • Responsive Carousel Plugin
      • Element Scroll Animations
      • Progress Bar Animation
      • Isotope Masonry Layout
      • Image Loading Detection
      • Counter Animations
      • Integrated Front-end Plugins
      • Custom Page Scripts
  • Home
  • Homepage Example Two
  • ...
  • Main Stylesheet

Customization

Please Read the Following 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 Adjustments

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

世界杯决赛比分

How to Add/Remove JS

Thumb

Important Notes

This system utilizes two fonts from Google Fonts: Manrope and Roboto. You can modify them using 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');

Welcome to Our Help Center

Read The following information Carefully

  • Fonts are sourced from Google Fonts. In case of no internet connection, default fonts will be displayed without affecting usability.
  • For further customization assistance, please email [email protected].
  • Before seeking support, please ensure you are a legitimate purchaser of our product. You can verify this by: 1. Submitting a support ticket with your proof of purchase. 2. Providing a screenshot of your account's download page for verification.

credits

We express our sincere gratitude to the developers who provided inspiration and assistance, their work has made the World Cup Live Scores system an exceptional platform.

Images and video

JS Libraries

  • jQuery
  • HTML5 Compatibility
  • Modernizr
  • jQuery Easing Effects
  • Smooth Scrolling
  • jQuery Element Visibility
  • Bootstrap Navigation Plugins
  • WOW Animation Library
  • jQuery Counter Plugin
  • Magnific Popup Lightbox
  • Equal Height Layout Plugin
  • Owl Carousel

CSS & Fonts

  • Bootstrap Framework
  • Animations
  • Font-Awesome Icons
  • Flaticons
  • Google Fonts
世界杯决赛比分 Technology Co., Ltd.Simple. Reliable. Yours.Phone：+86 157 3501 5805Email：[email protected]Block 756, North District, Science Park, Nanshan District, Shenzhen