H-code html template

01. How to change Fonts?

H-code uses 3 fonts: OpenSans, Oswald & OpenSans Condensed from the Google Fonts Library. You can change the fonts from /css/style.css file in below lines. If you want to use self hosted fonts other than Google fonts then here is an example of self hosted fonts. In this case you need to remove below lines and change font names in /css/style.css file as per your fonts used.

/* ===================================
Google font
====================================== */
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800);
@import url(http://fonts.googleapis.com/css?family=Oswald:400,300,700);
@import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,300italic,700);

02. How to make owl slider auto rotate?

Add autoPlay: 3000 parameter in the owl slider DIV ID (which you are using in the HTML) function you are using in this JS file: /js/main.js

 $("#owl-demo").owlCarousel({
    navigation: true, // Show next and prev buttons
	autoPlay: 3000,
    slideSpeed: 300,
    paginationSpeed: 400,
    singleItem: true,
    transitionStyle : "fade",
    navigationText: ["<i class='fa fa-angle-left'></i>", "<i class='fa fa-angle-right'></i>"]
 });

03. Image and Favicon Settings

Image Settings
H-code download package does not contain images which are there in our online demo. We are using placeholder images instead of real images. You will see the image code as mentioned below. You can replace placeholder image url with your image url like images/yourimage.jpg

    <img src="http://placehold.it/350x150">

Favicon Settings
To change the favicon image of your site, you need to load a new ICO image in a site root or to point out a new address of the image.

    <!--  favicon -->
    <link rel="shortcut icon" href="images/favicon.png">
    <link rel="apple-touch-icon" href="images/apple-touch-icon-57x57.png">
    <link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">

04. Logo Settings

The Logo Container can be found in the Nav Container – .navbar

    <!-- logo -->
    <div class="col-md-2 pull-left"><a class="logo-light" href="index.html">
    <img alt="" src="images/logo-white.png" class="logo" /></a>
    <a class="logo-dark" href="index.html">
    <img alt="" src="images/logo-light.png" class="logo" /></a></div>
    <!-- end logo -->