世界杯半决赛最新消息 | World Cup News & Updates

Quick Start

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.

Deployment and Configuration

Follow the steps below to setup your site template:

Unzip the downloaded compressed package, and open the “HTML” folder to find all template files. You need to upload these files to your server via FTP for website use.
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
You can upload all or part of the HTML files as needed.
All set! Start adding your content and images to create a brand new and 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 Effects CSS
  - Navigation Bar CSS
  - Bootstrap Core CSS
  - FontAwesome Icons CSS
  - Themify Icons CSS
  - Popup Window CSS
  - Owl Carousel Core CSS
  - Owl Carousel Theme CSS
  - Responsive Layout CSS
  - A merged and compressed version of all necessary CSS files
- Fonts
- Image assets storage area, such as Logos, accompanying images, videos, etc.
- js
  - Navigation Bar JavaScript
  - Bootstrap Core JavaScript
  - Area Height Adaptive JavaScript
  - Dynamic Filtering Plugin
  - Animation Trigger
  - Animation Easing
  - Image Lightbox
  - Core JavaScript Library
  - Feature Detection
  - Responsive Carousel
  - Animation Effects
  - Progress Bar
  - Masonry Layout
  - Image Load Detection
  - Numeric Counter
  - General Plugin Suite
  - Custom Scripts
Homepage
Homepage Example Two
...
Stylesheet

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

How to change page title

How to Change Banner Text & Background

Banner One

Banner Two

How to change Team Section

Thumb

How to change testimonial Section

Thumb

How to Change Breadcrumb

How to Add/Remove Footer Bottom

How to change contact form email

How to control Fun Factor

How to control Owl Carousel

How to control Preloader

How to Add/Remove CSS

How to Add/Remove JS

Important Notice

This site uses two fonts from the Google Fonts library: 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');

Acknowledgements

Read The following information Carefully

Site fonts are sourced from Google Fonts. Default fonts may display without an internet connection, which is normal.
If documentation is insufficient for customization, please email [email protected] for assistance.
Before seeking help, please verify you are the legitimate purchaser of this content. Proof of purchase can be provided via: 1. Submitting a support ticket with your purchase voucher. 2. Providing a screenshot of your purchase history from your account login.

credits

We would like to thank all the resources that have helped us build this site. Together, they form our exciting sports information platform.

Images and video

Free Stock Photos
Royalty-Free Images
High-Quality Free Photos
Curated Free Images
Free Stock Photography
Open Source Images

JS Libraries

JavaScript Framework
HTML5 Support
Modernizr Library
JavaScript Easing
Smooth Scrolling
jQuery Animation
Navigation Plugin
Animated Effects
Number Animation
Image Gallery Plugin
Equal Height Layouts
Image Carousel

CSS & Fonts

UI Framework
Visual Effects
Icon Library
Icon Set
Web Fonts

Overview

Download Package File Instructions