Infectious Coronavirus (COVID 19) Medical HTML Template

created: 7/04/2020
latest update: 7/04/2020
by: Designs Ninja
Designs Ninja
email: nadir.jafri@hotmail.com

Thank you very much for purchasing our theme! If you have any questions that aren't covered in this documentation, please feel free to email us.

Infectious is a Covid 19 Medical Prevention HTML Template. It is an Amazing HTML5 template for Coronavirus and all types of diseases. This Template also used for medical viruses, coronavirus, covid-19. Infectious Template is 100% responsive and looks stunning on all types of screens and devices. This template comes with One Page layouts with inner pages like prevention, about us, contact us etc.

It will be fit any mobile or tablet devices. This is a flexible template uses fresh and clean design.

Features

4 HTML Files
About Page
Prevention Page
Contact Page
1170 Grid Based Design
SVG Shapes
Responsive
Slick Slider
Fully Customization
Animated Elements
High Resolution Images

Folders

-assets (all assets/required file of this template)
--bootstrap (bootstrap core files)
--css (all css files)
--Slick Slider (all slick slider files)
--fonts (material icons and ion-icons font icon set )
--images (all images)
--SVG Shapes
--js (all javascript files)
--magnific-popup (all files for image popup)
- email-templates (a basic email template functional with contact form)
-and all other html files

HTML Structure

Being based on Twitter Bootstrap, Infectious inherits its awesome grid system. It's a responsive, mobile first grid that appropriately scales up to 12 columns as the device or view port size increases.

Example markup:

<div class="row">
    <div class="col-md-12">
       Level 1 column
       <div class="row">
           <div class="col-md-6">Level 2</div>
           <div class="col-md-6">Level 2</div>
       </div>
    </div>
</div>

CSS Files

<link rel="stylesheet" href="assets/css/master.css'>
<link rel="stylesheet" href="assets/css/responsive.css'>

@import url('https://fonts.googleapis.com/css?family=Lato:300,400,700,900|Montserrat:100,200,300,400,600,700,800,900|Open+Sans:400,700|Poppins:400,500');
@import url("../css/bootstrap.min.css");
@import url("../css/ionicons.min.css");
@import url("../css/custom-icons.min.css");
@import url("../css/cubeportfolio.css");
@import url("../css/bootsnav.css");
@import url("../css/slick.css");
@import url("../css/animate.css");

JavaScripts Files

<!--=== Javascript Plugins ===--> 
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/smoothscroll.js"></script>
<script src="assets/js/plugins.js"></script>
<script src="assets/js/master.js"></script>
<!--=== Javascript Plugins End ===-->

There are three kind of menu style in this template, Default Menu, Transparent Menu and Full Screen Menu. You need to change some classes to switch menu styles. It's very easy, here is some example of those menus:

The markup of Default menu:

<!-- Navigation start -->
<nav class="navbar navbar-default navbar-fixed navbar-transparent white bootsnav on no-full">
    your menu goes here...
</nav>
<!-- Navigation end -->

<!-- Navigation start -->
<nav class="navbar navbar-default navbar-fixed navbar-transparent dark bootsnav on no-full">
    your menu goes here...
</nav>
<!-- Navigation end -->

Just put "navbar navbar-default" class with "navbar-fixed navbar-transparent white bootsnav on no-full" for Default Menu.

The markup of Side menu:

<!--=== Start Atribute Navigation ===-->
      <div class="attr-nav">
        <ul>
        	<li class="side-menu"><a href="#"><i class="mdi mdi-menu"></i></a></li>
        </ul>
      </div>
      <!--=== End Atribute Navigation ===-->

You need to add "navbar-fixed-top" and "transparent" classes with "navbar-custom" class for get a transparent fixed menu. And also add "white" class for adjust navbar background color and menu item color.

You may add two alter logo for adjust logo color and navbar background color(applicable for transparent menu).
Here is the sample:

      <!--=== Start Header Navigation ===-->
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-menu"> 
             <i class="mdi mdi-menu"></i> 
        </button>
        <div class="logo"> 
              <a href="index.html"> <img class="logo logo-display" src="assets/images/logo-white.png" alt=""> <img class="logo logo-scrolled" src="assets/images/logo-black.png" alt=""> </a> 
        </div>
      </div>
      <!--=== End Header Navigation ===-->

Font icons used in this template.

Material Icons

You can use all hero units (slider sections) at any pages. Just copy the Intro Section or Video Section or Slider section and past it in any pages. You can create new pages with this bolcks.

Example:
If you wish to make your homepage with html video slider just copy this code and past it on your new page.

<section class="home-slider" id="home">
    <div class="default-slider slick">
      <div class="slide">
        <div class="slide-img parallax-effect" style="background:url(assets/images/slides/home-bg-1.jpg) center center / cover scroll no-repeat;"></div>
        <div class="hero-text-wrap">
          <div class="hero-text">
            <div class="container">
              <div class="row">
                <div class="col-md-6">
                  <h3 class="upper-case dark-color font-600">Infectious</h3>
                  <h1 class="upper-case font-800 default-color">Covid 19</h1>
                  <p class="dark-color">Coronavirus disease (COVID-19) is an infectious disease caused by a new virus. The disease causes respiratory illness (like the flu) with symptoms such as a cough, fever, and in more severe cases, difficulty breathing.</p>
                  <p class="text-left mt-30"><a class="btn btn-color btn-circle btn-md">How to Protect</a> </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="slide">
        <div class="slide-img parallax-effect" style="background:url(assets/images/slides/home-bg-2.jpg) center center / cover scroll no-repeat;"></div>
        <div class="hero-text-wrap">
          <div class="hero-text">
            <div class="container">
              <div class="row">
                <div class="col-md-7">
                  <h3 class="upper-case dark-color font-600">Stay Home</h3>
                  <h1 class="upper-case font-800 green-color">Stay Safe</h1>
                  <p class="dark-color">Italy reported 683 new deaths in the coronavirus pandemic, bringing its total to 7,503. Spain, meanwhile, recorded more than 700 deaths over the past 24 hours.</p>
                  <p class="text-left mt-30"><a class="btn btn-green btn-circle btn-md">About Virus</a> </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

Important: Dont forget to add required CSS files and Javascript files at header and footer.

You will get lots of shortcodes with this template. We made all shortcodes clean and re useable.
You can use all shortcodes at anywhere and in any pages of this template. Just copy any block you like and past it any where you wish.

Example:

<!--=== Welcome Start ===-->
  <section id="about">
  	<div class="container">
  		<div class="row">
  			<div class="col-md-6 heading-style-one box-title-two text-left">
  				<h6 class="yellow-color text-uppercase">About the Disease</h6>
  				<h2><span class="font-700">Coronavirus (COVID-19)</h2>
          <p>An ongoing worldwide pandemic of coronavirus disease 2019 (COVID-19), a novel infectious disease caused by severe acute respiratory syndrome coronavirus 2 (SARS-CoV-2), was first confirmed to have spread to Italy on 31 January 2020, when two Chinese tourists in Rome tested positive for the virus.</p>
  			</div>
  		</div>

  		<div class="row mt-100">
  			<div class="col-md-4">
  				<div class="feature-box text-center feature-box-rounded mb-20">
  					<i class="virus-icon img-icon"></i>
  					<h3 class="font-600">Virus</h3>
  					<p>A virus is a submicroscopic infectious agent that replicates only inside the living cells of an organism.</p>
					<p class="mt-30">
						<a class="btn btn-green btn-sm btn-circle">Read More</a>
					</p>
  				</div>
  			</div>
  			<div class="col-md-4">
  				<div class="feature-box text-center feature-box-rounded mb-20">
  					<i class="hand-icon img-icon"></i>
  					<h3 class="font-600">Hand Washing</h3>
  					<p>Wash your hands, wash your hands, wash your hands. That splash-under-water flick won’t cut it anymore.</p>
					<p class="mt-30">
						<a class="btn btn-pink btn-sm btn-circle">Read More</a>
					</p>
  				</div>
  			</div>
  			<div class="col-md-4">
  				<div class="feature-box text-center feature-box-rounded">
  					<i class="mask-icon img-icon"></i>
  					<h3 class="font-600">Use Mask</h3>
  					<p>Face masks have become a symbol of coronavirus, but stockpiling them might do more harm than good.</p>
					<p class="mt-30">
						<a class="btn btn-purple btn-sm btn-circle">Read More</a>
					</p>
  				</div>
  			</div>
  		</div>
  	</div>
  </section>
  <!--=== Welcome End ===-->

Just copy this block and past anywhere of any page of this template. You can youse all individual blocks along with this template.

We used a dynamic google map in this template. You can easily change your location, address, map marker, map color and almost everything.

First open script.js from assets/js/scripts.js find out /* ======= GOOGLE MAP ======= */ wrapper.

Put your latitude longitude, put your map marker at $marker_url.

Write your address in "contentString".

You can also change map color form "stylers" zoom options form "map_zoom"

In html put the map "id" in any section and give it a min-height(your desired height)

JS Markup:

/* ==================================================================
     GOOGLE MAPS 
     ================================================================== */
	    if ($('#myMap').length > 0) {
        //set your google maps parameters
        var $latitude = 40.716304, //If you unable to find latitude and longitude of your address. Please visit http://www.latlong.net/convert-address-to-lat-long.html you can easily generate.
            $longitude = -73.995763,
            $map_zoom = 16 /* ZOOM SETTING */

        //google map custom marker icon 
        var $marker_url = 'assets/images/pin.png';

        //we define here the style of the map
        var style = 
            [
		  {
			"elementType": "geometry",
			"stylers": [
			  {
				"color": "#f5f5f5"
			  }
			]
		  },
		  {
			"elementType": "labels.icon",
			"stylers": [
			  {
				"visibility": "off"
			  }
			]
		  },
		  {
			"elementType": "labels.text.fill",
			"stylers": [
			  {
				"color": "#616161"
			  }
			]
		  },
		  {
			"elementType": "labels.text.stroke",
			"stylers": [
			  {
				"color": "#f5f5f5"
			  }
			]
		  },
		  {
			"featureType": "administrative.country",
			"elementType": "geometry.fill",
			"stylers": [
			  {
				"color": "#1ec0ff"
			  }
			]
		  },
		  {
			"featureType": "administrative.land_parcel",
			"elementType": "labels.text.fill",
			"stylers": [
			  {
				"color": "#bdbdbd"
			  }
			]
		  },
		  {
			"featureType": "poi",
			"elementType": "geometry",
			"stylers": [
			  {
				"color": "#eeeeee"
			  }
			]
		  },
		  {
			"featureType": "poi",
			"elementType": "labels.text.fill",
			"stylers": [
			  {
				"color": "#757575"
			  }
			]
		  },
		  {
			"featureType": "poi.park",
			"elementType": "geometry",
			"stylers": [
			  {
				"color": "#e5e5e5"
			  }
			]
		  },
		  {
			"featureType": "poi.park",
			"elementType": "labels.text.fill",
			"stylers": [
			  {
				"color": "#9e9e9e"
			  }
			]
		  },
		  {
			"featureType": "road",
			"elementType": "geometry",
			"stylers": [
			  {
				"color": "#ffffff"
			  }
			]
		  },
		  {
			"featureType": "road.arterial",
			"elementType": "labels.text.fill",
			"stylers": [
			  {
				"color": "#757575"
			  }
			]
		  },
		  {
			"featureType": "road.highway",
			"elementType": "geometry",
			"stylers": [
			  {
				"color": "#dadada"
			  }
			]
		  },
		  {
			"featureType": "road.highway",
			"elementType": "labels.text.fill",
			"stylers": [
			  {
				"color": "#616161"
			  }
			]
		  },
		  {
			"featureType": "road.local",
			"elementType": "labels.text.fill",
			"stylers": [
			  {
				"color": "#9e9e9e"
			  }
			]
		  },
		  {
			"featureType": "transit.line",
			"elementType": "geometry",
			"stylers": [
			  {
				"color": "#e5e5e5"
			  }
			]
		  },
		  {
			"featureType": "transit.station",
			"elementType": "geometry",
			"stylers": [
			  {
				"color": "#eeeeee"
			  }
			]
		  },
		  {
			"featureType": "water",
			"elementType": "geometry",
			"stylers": [
			  {
				"color": "#c9c9c9"
			  }
			]
		  },
		  {
			"featureType": "water",
			"elementType": "labels.text.fill",
			"stylers": [
			  {
				"color": "#9e9e9e"
			  }
			]
		  }
		];

        //set google map options
        var map_options = {
            center: new google.maps.LatLng($latitude, $longitude),
            zoom: $map_zoom,
            panControl: true,
            zoomControl: true,
            mapTypeControl: true,
            streetViewControl: true,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            scrollwheel: false,
            styles: style
        }
        //inizialize the map
        var map = new google.maps.Map(document.getElementById('myMap'), map_options);
        //add a custom marker to the map                
        var marker = new google.maps.Marker({
            position: new google.maps.LatLng($latitude, $longitude),
            map: map,
            visible: true,
            icon: $marker_url
        });

        var contentString = '<div id="mapcontent">' + '<p>Arcon Studio</p></div>';
        var infowindow = new google.maps.InfoWindow({
            maxWidth: 320,
            content: contentString
        });

        google.maps.event.addListener(marker, 'click', function() {
            infowindow.open(map, marker);
        });
       
    }
	 });

HTML Markup:

<div id="myMap"></div>

In Infectious HTML5 template there is full functional working contact form. We have also added a simple email template with this contact form.

To customize/change the email address please open "sendemail.php" file from root folder in any code editor .

Go to the line number 9. There is a line:

$to         = 'youremail@gmail.com'; //put your email here

Replace the existing email address with your own mailing address.

Thats it! your template is ready now for receive message from others via mail.

Photos and Videos

Important!

The images used on the demo site are for demonstration purposes only and are not included in the download file. We have included placeholder images for each instance.

Slider Images: https://unsplash.com/ , http://www.freepik.com/, http://www.pexels.com/

Once again, thank you very much for purchasing this template; we'll be glad to help you if you have any questions.

If you have a more general question relating to the templates on ThemeForest, please consider visiting the forums and asking your question in the "Item Discussion" section.

Thanks,

Incognito Themes

Infectious Coronavirus (COVID 19) Medical HTML Template

Overview

Features

File & Code Structure

Folders

HTML Structure

Navigation

Icons

Hero Units

Shortcodes

Google Map

Contact Form

Sources & Credits

HTML/CSS

Fonts

JavaScripts