Hybrid Design With ♥ by inebur

General Structure

Lets begin. Open index.html file and follow the steps. Most of the structure are same for all pages.

Nav Menu:

<nav class="nav-menu">
  <button id="nav-toggle" class="menu-toggle">
    <span class="icon"></span>
    <span class="icon"></span>
    <span class="icon"></span>
  </button>
  <ul class="main-menu">
    <li class="menu-item">
      <a class="active" href="#">Home</a>
    </li>
    <li class="menu-item menu-item-has-children">
      <a class="m-0 pr-1 v-stroke">Services</a>
      <ul class="sub-menu menu-large">
        <div class="service-list">
          <div class="service">
            <i class="icon-cloudfiber"></i>
            <div class="media-body">
              <a class="menu-item" href="hosting.html">Cloud Hosting</a>
              <p>Lorem ipsum dolor sit amet</p>
            </div>
          </div>
          <div class="service">
            <i class="icon-reseller"></i>
            <div class="media-body">
              <a class="menu-item" href="reseller.html">Cloud Reseller</a>
              <p>Adipiscing integer act lacinia</p>
            </div>
          </div>
          <div class="service">
            <i class="icon-dedicated"></i>
            <div class="media-body">
              <a class="menu-item" href="dedicated.html">Dedicated Server</a>
              <p>olor sit amet conse adipiscing</p>
            </div>
          </div>
          <div class="service">
            <i class="icon-vps"></i>
            <div class="media-body">
              <a class="menu-item" href="vps.html">Cloud VPS</a>
              <p>Dolor sit amet conse adipiscing</p>
            </div>
          </div>
          <div class="service">
            <i class="icon-wordpress"></i>
            <div class="media-body">
              <a class="menu-item" href="wordpress.html">Wordpress</a>
              <p>Dolor sit amet conse adipiscing</p>
            </div>
          </div>
          <div class="service">
            <i class="icon-domains"></i>
            <div class="media-body">
              <a class="menu-item" href="domains.html">Domain Names</a>
              <p>Dolor sit amet conse adipiscing</p>
            </div>
          </div>
        </div>
      </ul>  
    </li>
    <li class="menu-item menu-item-has-children">
      <a href="#">Pages</a>
      <ul class="sub-menu sec-grad-white-to-grey">
        <li class="menu-item"><a href="countdown.html">Coming Soon</a></li>
        <li class="menu-item"><a href="about.html">About Us</a></li>
        <li class="menu-item"><a href="404.html">404 Error</a></li>
        <li class="menu-item"><a href="signup.html">Sign up</a></li>
        <li class="menu-item"><a href="login.html">Client Area</a></li>
        <li class="menu-item"><a href="cart.html">Cart</a></li>
        <li class="menu-item"><a href="checkout.html">Checkout</a></li>
      </ul>
    </li>
    <li class="menu-item">
      <a class="h-stroke" href="blog.html">Blog</a>
    </li>
    <li class="menu-item">
      <a class="h-stroke" href="elements.html">Features</a>
    </li>
    <li class="menu-item menu-item-has-children">
      <a class="v-stroke" href="#">Support</a>
      <ul class="sub-menu sec-grad-white-to-grey">
        <li class="menu-item"><a href="knowledgebase.html">knowledge Base</a></li>
        <li class="menu-item"><a href="contact.html">Contact Us</a></li>
        <li class="menu-item"><a href="faq.html">FAQ</a></li>
      </ul>
    </li>
  </ul>
</nav>

Nav Menu Mobile:

<nav class="nav-menu">
  <button id="nav-toggle" class="menu-toggle">
    <span class="icon"></span>
    <span class="icon"></span>
    <span class="icon"></span>
  </button>
  <ul class="main-menu sec-grad-white-to-grey">
    <li class="menu-item">
      <a class="active">Home</a>
    </li>
    <li class="menu-item menu-item-has-children">
      <a>Services</a>
      <ul class="sub-menu">
        <li class="menu-item"><a href="hosting.html">Cloud Hosting</a></li>
        <li class="menu-item"><a href="reseller.html">Cloud Reseller</a></li>
        <li class="menu-item"><a href="dedicated.html">Dedicated Server</a></li>
        <li class="menu-item"><a href="vps.html">Cloud VPS</a></li>
        <li class="menu-item"><a href="wordpress.html">WordPress</a></li>
        <li class="menu-item"><a href="domains.html">Domains Names</a></li>
      </ul>
    </li>
    <li class="menu-item menu-item-has-children">
      <a>Pages</a>
      <ul class="sub-menu">
        <li class="menu-item"><a href="countdown.html">Coming Soon</a></li>
        <li class="menu-item"><a href="about.html">About Us</a></li>
        <li class="menu-item"><a href="404.html">404 Error</a></li>
        <li class="menu-item"><a href="signup.html">Register</a></li>
        <li class="menu-item"><a href="login.html">Client Area</a></li>
        <li class="menu-item"><a href="cart.html">Cart</a></li>
        <li class="menu-item"><a href="checkout.html">Checkout</a></li>
      </ul>
    </li>
    <li class="menu-item">
      <a href="blog.html">Blog</a>
    </li>
    <li class="menu-item">
      <a href="elements.html">Features</a>
    </li>
    <li class="menu-item menu-item-has-children">
      <a>Support</a>
      <ul class="sub-menu">
        <li class="menu-item"><a href="knowlegebase.html">Knowlege Base</a></li>
        <li class="menu-item"><a href="contact.html">Contact Us</a></li>
        <li class="menu-item"><a href="faq.html">FAQ</a></li>
      </ul>
    </li>
    <li>
    <li class="mt-4">
      <a href="tel:+0000000000"> <p class="c-grey">Phone: + (123) 1300-656-1046</p></a>
      <a href="mailto:elastic@mail.com"><p class="c-grey">Email: elastic@mail.com</p></a>
    </li>
    <li class="mt-4">
      <a href="login.html"><div class="btn btn-default-green-fill mt-3">CLIENT AREA</div></a>
    </li>
  </ul>
</nav>

HTML Structure

This Template has a Responsive layout and is based on the Bootstrap Framework. For more info visit Bootstrap.
Bootstrap’s grid includes five tiers of predefined classes for building complex responsive layouts. Customize the size of your columns on extra small, small, medium, large, or extra large devices however you see fit.
Grid System:
<div class="container">
  <div class="row">
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
  </div>
</div>
Nesting Columns

To nest your content with the default grid, add a new .row and set of .col-sm-* columns within an existing .col-sm-* column. Nested rows should include a set of columns that add up to 12 or fewer (it is not required that you use all 12 available columns). 

<div class="row">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-8 col-sm-6">
      Level 2: .col-8 .col-sm-6
      </div>
      <div class="col-4 col-sm-6">
      Level 2: .col-4 .col-sm-6
      </div>
    </div>
  </div>
</div>

CSS Structure

These are the css files that are loaded into templates in Head Section.

<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="fonts/cloudicon/cloudicon.css" rel="stylesheet">
<link href="fonts/fontawesome/css/all.css" rel="stylesheet">
<link href="fonts/opensans/opensans.css" rel="stylesheet">
<link href="css/owl.carousel.css" rel="stylesheet">
<link href="css/idangerous.swiper.css" rel="stylesheet">
<link href="css/magnific-popup.css" rel="stylesheet">
<link href="img/favicon.ico" rel="shortcut icon">
<link href="css/style.css" rel="stylesheet">
<link href="css/responsive.css" rel="stylesheet">
<link href="css/slick.css" rel="stylesheet">
Dont change anything in bootstrap.min.css file. It may affect the whole template.
By default, the template loads this font from css file, but you can change the font.

JavaScript Structure

These are the JS files that are loaded into templates in end of the body section.

<script src="js/jquery.min.js"></script>
<script src="js/typed.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/idangerous.swiper.min.js"></script>
<script src="js/jquery.viewportchecker.min.js"></script>
<script src="js/jquery.countdown.js"></script>
<script src="js/jquery.magnific-popup.min.js"></script>
<script src="js/slick.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/isotope.min.js"></script>
<script src="js/scripts.js"></script>