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 - Full Width Responsive Menu

<nav class="nav-menu">
  <button class="menu-toggle">
    <span class="icon"></span>
    <span class="icon"></span>
    <span class="icon"></span>
  </button>
  <ul class="main-menu">
    <li class="menu-item active menu-item-has-children">
      <a class="active" href="#">Home</a>
      <ul class="sub-menu">
        <li class="menu-item"><a href="index.html">Home Page v01</a></li>
        <li class="menu-item"><a href="homepage-2.html">Home Page v02</a></li>
        <li class="menu-item"><a href="homepage-3.html">Home Page v03</a></li>
        <li class="menu-item"><a href="homepage-4.html">Home Page v04</a></li>
      </ul>
    </li>
    <li class="menu-item menu-item-has-children">
      <a class="m-0 pr-1" href="#">Services</a>
      <div class="sub-menu menu-large">
        <ul class="container">
          <li class="service-list">
            <div class="row">
              <div class="col-4 service">
                <div class="media-left">
                  <i class="icon-cloudfiber"></i>
                </div>
                <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="col-4 service">
                <div class="media-left">
                  <i class="icon-reseller"></i>
                </div>
                <div class="media-body">
                  <a class="menu-item" href="reseller.html">Cloud Resellerr</a>
                  <p>Adipiscing integer act lacinia</p>
                </div>
              </div>
              <div class="col-4 service">
                <div class="media-left">
                  <i class="icon-dedicatded"></i>
                </div>
                <div class="media-body">
                  <a class="menu-item" href="dedicated.html">Dedicated Servers</a>
                  <p>Dolor sit amet conse adipiscing</p>
                </div>
              </div>
              <div class="col-4 service">
                <div class="media-left">
                  <i class="icon-vps"></i>
                </div>
                <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="col-4 service">
                <div class="media-left">
                  <i class="icon-wordpress"></i>
                </div>
                <div class="media-body">
                  <a class="menu-item" href="wordpress.html">WordPress</a>
                  <p>Adipiscing integer act lacinia</p>
                </div>
              </div>
              <div class="col-4 service">
                <div class="media-left">
                  <i class="icon-domains"></i>
                </div>
                <div class="media-body">
                  <a class="menu-item" href="ipad-repair.html">Domain Names</a>
                  <p>Dolor sit amet conse adipiscing</p>
                </div>
              </div>
            </div>
          </li>
          <li class="start-offer">
            <div class="inner">
              <i class="icon-coupon"></i>
              <div class="title">Wildcard SSL</div>
              <p>Protect your all Subdomains</p>
              <div class="val">before <sup>$</sup>39.99<span class="period">/yr</span></div>
              <div class="dis">now <sup>$</sup>30.49<span class="period">/yr</span></div>
              <a href="ssl.html class="btn btn-block btn-default-green-fill">Buy now</a>
            </div>
          </li>
        </ul>
      </div>  
    </li>
    <li class="menu-item menu-item-has-children">
      <a href="#">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="team.html">Our Team</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">Login</a></li>
      </ul>
    </li>
    <li class="menu-item menu-item-has-children">
      <a href="#">E-Shop</a>
      <ul class="sub-menu">
        <li class="menu-item"><a href="shop.html">e-Shop Products</a></li>
        <li class="menu-item"><a href="shop-2.html">e-Shop Sidebar</a></li>
        <li class="menu-item"><a href="shop-3.html">e-Shop Product Details</a></li>
        <li class="menu-item"><a href="checkout.html">Checkout</a></li>
        <li class="menu-item"><a href="cart.html">Cartt</a></li>
      </ul>
    </li>
    <li class="menu-item menu-item-has-children">
      <a href="#">Blog</a>
      <ul class="sub-menu">
        <li class="menu-item"><a href="blog-1.html">Blog One Column</a></li>
        <li class="menu-item"><a href="blog-2.html">Blog Two Columns</a></li>
        <li class="menu-item"><a href="blog-details.html">Blog Details</a></li>
      </ul>
    </li>
    <li class="menu-item menu-item-has-children">
      <a href="#">Features</a>
      <ul class="sub-menu">
        <li class="menu-item"><a href="elements.html">Elements</a></li>
        <li class="menu-item"><a href="pricing-tables.html">Pricing Tables</a></li>
      </ul>
    </li>
    <li class="menu-item menu-item-has-children">
      <a href="#">Support</a>
      <ul class="sub-menu">
        <li class="menu-item"><a href="knowledgebase.html">Blog One Column</a></li>
        <li class="menu-item"><a href="contact.html">Contact us</a></li>
        <li class="menu-item"><a href="help.html">Help</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 class="menu-toggle">
    <span class="icon"></span>
    <span class="icon"></span>
    <span class="icon"></span>
  </button>
  <ul class="main-menu">
    <li class="mb-3">
      <a href="tel:+0000000000"> <small class="c-grey">Phone: + (123) 1300-656-1046</small></a> <br>
      <a class="mb-3" href="mailto:cloudy@mail.com"><small class="c-grey">Email: cloudy@mail.com</small></a>
    </li>
    <li class="menu-item menu-item-has-children">
      <a class="active">Home</a>
      <ul class="sub-menu">
        <li class="menu-item"><a href="index.html">ome Page v01</a></li>
        <li class="menu-item"><a href="homepage-2.html">ome Page v02</a></li>
        <li class="menu-item"><a href="homepage-3.html">ome Page v03</a></li>
        <li class="menu-item"><a href="homepage-4.html">ome Page v04</a></li>
      </ul>
    </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>
        <li class="menu-item"><a href="ssl.html">Certificates SSL</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="team.html">Our Team</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">Log in</a></li>
      </ul>
    </li>
    <li class="menu-item menu-item-has-children">
      <a>E-Shop</a>
      <ul class="sub-menu">
        <li class="menu-item"><a href="shop.html">e-Shop Products</a></li>
        <li class="menu-item"><a href="shop-2.html">e-Shop Side Bar</a></li>
        <li class="menu-item"><a href="shop-3.html">e-Shop Product Details</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 menu-item-has-children">
      <a>Blog</a>
      <ul class="sub-menu">
        <li class="menu-item"><a href="blog-1.html">Blog One Column</a></li>
        <li class="menu-item"><a href="blog-2.html">Blog Two Columns</a></li>
        <li class="menu-item"><a href="blog-details.html">Blog Details</a></li>
      </ul>
    </li>
    <li class="menu-item menu-item-has-children">
      <a>Features</a>
      <ul class="sub-menu">
        <li class="menu-item"><a href="elements.html">Elements</a></li>
        <li class="menu-item"><a href="pricing-tables.html">Pricing Tables</a></li>
      </ul>
    </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="help.html">Help</a></li>
        <li class="menu-item"><a href="faq.html">FAQ</a></li>
      </ul>
    </li>
    <li>
      <a href="login.html"><div class="btn btn-default-alt-green mt-3">Login</div></a>
    </li>
  </ul>
</nav>

Header Logo

<a href="index.html">
  <img src="img/logo.svg" alt="logo" class="logo-menu">
</a>

Pricing Table - Classic

<div class="pricing classic">
  <div class="container">
    <div class="extra shadown-nome pt-60 pb-60">
      <div class="row">
        <div class="col-md-12 col-sm-12 text-center">
          <h2 class="section-heading text-white">Title</h2>
          <p class="section-subheading text-white">Subtitle</p>
        </div>
        <div class="col-12 col-sm-12 col-md-4 col-lg-4">
          <div class="wrapper first">
          Contents of the first table
          </div>
        </div>
        <div class="col-12 col-sm-12 col-md-4 col-lg-4">
          <div class="wrapper active">
          Contents of the second table 
          </div>
        </div>
        <div class="col-12 col-sm-12 col-md-4 col-lg-4">
          <div class="wrapper third">
          Contents of the third table
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Google Map

<div class="google-maps">
  <div class="map" data-lat="-37.754399" data-lng="144.973339" data-marker="img/marker.png" 
  data-zoom="10" data-style="style-1"></div>
</div>

To replace the google map link, click here

HTML Structure

This Template has a Responsive layout and is based on the Bootstrap Framework. For more information 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.
Basic Grid HTML
<div class="row">
  <div class="col-sm-8">col-sm-8</div>
  <div class="col-sm-4">col-sm-4</div>
</div>
<div class="row">
  <div class="col-sm">col-sm</div>
  <div class="col-sm">col-sm</div>
  <div class="col-sm">col-sm</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 theme.
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/bootstrap.min.js"></script>
<script src="js/idangerous.swiper.min.js"></script>
<script src="js/jquery.viewportchecker.min.js"></script>
<script src="js/jquery.circliful.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>