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.
Follow the steps below to setup your site template:
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.
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>
HUPU Sports Live uses two fonts: Manrope and Roboto, both from the Google Fonts library. You can swap them out with this 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');
Huge thanks to the awesome developers who helped us build this slick and user-friendly HUPU Sports Live interface: