KOVID19 is a modern and elegant landing page, created for Medical prevention and socail awareness website.
KOVID19 is based on Bootstrap 4, So it give you more flexible for customize. All files are clearly organised we believe it will be easy to use and edit them. Design is very clean, elegant and modern. Any one can customize this template as his wishes.
Thank you for purchasing our KOVID19 Landing HTML Template. If you have any questions that are beyond the scope of this help file, please feel free to email via my user profile contact form here. Thanks so much!
<!DOCTYPE html>
<html lang="zxx" class="js">
<head>
<meta charset="utf-8">
<meta name="author" content="Softnio">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<!-- Fav Icon -->
<link rel="shortcut icon" href="images/favicon.png">
<!-- Site Title -->
<title>KOVID19 | Coronavirus (COVID-19) Prevention & Informatics html Template</title>
<!-- Bundle and Base CSS -->
<link rel="stylesheet" href="assets/css/bundle.css?ver=100">
<link rel="stylesheet" href="assets/css/styles.css?ver=100">
</head>
<body class="nk-body">
<div class="nk-wrap">
<header class="nk-header bg-light has-overlay" id="home">
<div class="overlay shape shape-a"></div>
<div class="nk-navbar is-light is-sticky" id="navbar">
</div><!-- .nk-navbar -->
<div class="nk-banner">
</div><!-- .nk-banner -->
</header><!-- .nk-header -->
<main class="nk-pages">
<section class="section section-l bg-light section-blog" id="news">
<div class="container">
<div class="section-head text-center wide-lg">
</div><!-- .section-head -->
<div class="section-content">
</div><!-- .section-content -->
</div><!-- .container -->
</section><!-- .section -->
</main><!-- .nk-pages -->
<footer class="nk-footer bg-dark tc-light">
<section class="section section-footer section-m tc-light">
<div class="container">
<div class="nk-footer-top">
</div><!-- .nk-footer-top -->
<div class="nk-footer-bottom">
</div><!-- .nk-footer-bottom -->
</div><!-- .container -->
</section><!-- .section -->
</footer><!-- .nk-footer -->
</div><!-- .nk-wrap -->
<!-- JavaScript -->
<script src="assets/js/bundle.js?ver=100"></script>
<script src="assets/js/scripts.js?ver=100"></script>
</body>
</html>
All CSS are located in the "assets/css" folder of the template. Each CSS File is well commented and easy to use and customize to your own needs. Here's the list of the CSS files:
@charset "UTF-8";
/*!
* Theme Name: Kovid19
* Author: Softnio
* Author URI: http://themeforest.net/user/softnio
* Version: 1.0.0
* Updated: 03/25/2020
**/
/**
----------------------
## TABLE CONTNETS ##
01. Fonts
02. Reset
03. Utilities
-- 03.1 Wide
-- 03.2 Backgrounds
-- 03.3 Guttters
-- 03.4 Overflow
-- 03.5 Overlay
04. Elements
-- 04.1 Btns
-- 04.2 Logo
05. Components
-- 05.1 Banner
-- 05.2 Status
-- 05.3 Text Block
-- 05.4 Boxes
-- 05.5 List
-- 05.6 Blog
-- 05.7 Protect
-- 05.8 Accordions
-- 05.9 Tabs
-- 05.10 WGS
-- 05.11 Copyright
06. Layouts
-- 06.1 Header
-- 06.2 Section
-- 06.3 Navbar
-- 06.4 Menu
-- 06.5 Footer
---------------------- **/
/** IMPORTANT NOTE: DO NOT Edit this file. Best to write your code in saparete file It will helps you to easy update of the template. */
/** 01. Fonts */
@font-face { font-family: 'Roboto'; src: url("../fonts/Roboto-Bold.eot"); src: local("Roboto Bold"), local("Roboto-Bold"), url("../fonts/Roboto-Bold.eot?#iefix") format("embedded-opentype"), url("../fonts/Roboto-Bold.woff2") format("woff2"), url("../fonts/Roboto-Bold.woff") format("woff"), url("../fonts/Roboto-Bold.ttf") format("truetype"); font-weight: bold; font-style: normal; }
/** 02. Reset */
html, body { font-family: "Roboto", sans-serif; color: #465675; font-size: 14px; line-height: 1.6; font-weight: 300; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; position: relative; }
@media (min-width: 576px) { html, body { font-size: 16px; line-height: 1.6; font-weight: 300; } }
body.noscroll { overflow: hidden; }
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section { display: block; }
*[hidden] { display: none; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote::after, blockquote::before, q::after, q::before { content: none; }
table { border-collapse: collapse; border-spacing: 0; }
.tc-light { color: #fff; }
h1, h2, h3, .h1, .h2, .h3 { color: #465675; font-weight: 700; font-family: "Oswald", sans-serif; line-height: 1.3; margin-bottom: 0.5rem; }
h1:last-child, h2:last-child, h3:last-child, .h1:last-child, .h2:last-child, .h3:last-child { margin-bottom: 0; }
.tc-light h1, .tc-light h2, .tc-light h3, .tc-light .h1, .tc-light .h2, .tc-light .h3 { color: #fff; }
h4, .h4, h5, h6, .h5, .h6 { font-family: "Roboto", sans-serif; font-weight: 700; }
.tc-light h4, .tc-light .h4, .tc-light h5, .tc-light h6, .tc-light .h5, .tc-light .h6 { color: #a8b2ff; }
p { margin-bottom: .75rem; color: #465675; line-height: 1.5; }
p:last-child { margin-bottom: 0; }
.tc-light p { color: #fff; }
p.lead { font-size: 1.125rem; line-height: 1.5; }
p.small { font-size: .75rem; line-height: 1.67; }
ul, ol, table { margin: 0; padding: 0; }
strong, b { font-weight: 700; }
a { outline: 0 none; transition: all 0.5s; }
a:link, a:visited { text-decoration: none; }
a:hover, a:focus, a:active { outline: 0; }
img { max-width: 100%; height: auto; }
h1, .h1, .fz-1 { font-size: 2.25rem; }
h2, .h2, .fz-2 { font-size: 1.6875rem; }
h3, .h3, .fz-3 { font-size: 1.5rem; letter-spacing: 0.04em; }
h4, .h4, .fz-4 { font-size: 1.25rem; }
h5, .h5, .fz-5 { font-size: 1rem; }
h6, .h6, .fz-6 { font-size: 1rem; }
All CSS are located in the "assets/css" folder of the template. Each CSS File is well commented and easy to use and customize to your own needs. Here's the list of the CSS files:
/*!
* Kovid19 v1.0.0 by Softnio.
**/
jQuery(function () {
"use strict";
var $win = $(window),
$doc = $(document),
$body = $('body'),
_has_fixed = "has-fixed";
function sticky_navbar(){
var $is_sticky = $('.is-sticky');
if ($is_sticky.length > 0 ) {
var navm = $is_sticky.offset();
function sticky(){
var _top = $(window).scrollTop();
if(_top > navm.top){
if(!$is_sticky.hasClass(_has_fixed)) {
$is_sticky.addClass(_has_fixed);
}
} else {
if($is_sticky.hasClass(_has_fixed)) {
$is_sticky.removeClass(_has_fixed);
}
}
}
sticky()
$(window).on('scroll', function(){
sticky()
});
}
}
sticky_navbar();
}());