###### Hybrid Design With ♥ by inebur

# General Structure

#### Nav Menu:

####

Lets begin. Open header.html file and follow the steps. Remember! The header is loaded once from a single file (header.html) into several HTML pages ;) This presentation includes the i18next language translation.

    <nav id="menu">
      <div class="navigation>
        <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">
            <a class="h-stroke" href="index" data-i18n="[html]header.home"> </a>
          </li>
          <li class="menu-item menu-item-has-children">
            <a class="m-0 pr-1 v-stroke" href="#" data-i18n="[html]header.services"> </a>
            <div class="badge badge-pill bg-purple mr-4">PRO</div>
            <div class="sub-menu menu-large">
              <div class="service-list">
                <div class="service">
                  <img class="svg" src="fonts/svg/cloudfiber.svg" alt="Shared Hosting">
                  <div class="media-body">
                    <a class="menu-item" href="hosting" data-i18n="[html]submenu.hosting"> </a>
                    <p>Sed ut perspiciatis unde omnis iste natus</p>
                  </div>
                </div>
                <div class="service">
                  <img class="svg" src="fonts/svg/reseller.svg" alt="Cloud Reseller">
                  <div class="media-body">
                    <a class="menu-item" href="reseller" data-i18n="[html]submenu.reseller"> </a>
                    <p>Lorem ipsum dolor sit amet, consectetur</p>
                  </div>
                </div>
                <div class="service">
                  <img class="svg" src="fonts/svg/dedicated.svg" alt="Dedicated Server">
                  <div class="media-body">
                    <a class="menu-item" href="dedicated" data-i18n="[html]submenu.dedicated"> </a>
                    <div class="menu badge feat bg-pink">FILTER</div>
                    <p>But I must explain to you how all this</p>
                  </div>
                </div>
                <div class="service">
                  <img class="svg" src="fonts/svg/vps.svg" alt="Cloud VPS">
                  <div class="media-body">
                    <a class="menu-item" href="vps" data-i18n="[html]submenu.vps"> </a>
                    <div class="menu badge feat bg-grey">SSD</div>
                    <p>At vero eos et accusamus et iusto odio</p>
                  </div>
                </div>
                <div class="service">
                  <img class="svg" src="fonts/svg/wordpress.svg" alt="WordPress Hosting">
                  <div class="media-body">
                    <a class="menu-item" href="wordpress" data-i18n="[html]submenu.wordpress"> </a>
                    <p>On the other hand, we denounce with</p>
                  </div>
                </div>
                <div class="service">
                  <img class="svg" src="fonts/svg/domains.svg" alt="Domains">
                  <div class="media-body">
                    <a class="menu-item" href="domains" data-i18n="[html]submenu.domains"> </a>
                    <p>Lorem ipsum dolor sit amet, consectetur</p>
                  </div>
                </div>
                <div class="service">
                  <img class="svg" src="fonts/svg/code.svg" alt="Developer Hosting">
                  <div class="media-body">
                    <a class="menu-item" href="developer" data-i18n="[html]submenu.developer"> <</a>
                    <p>ed ut perspiciatis unde omnis iste natus</p>
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li class="menu-item menu-item-has-children">
            <a class="v-stroke" href="#" data-i18n="[html]header.pages"> </a>
            <ul class="sub-menu">
              <li class="menu-item"><a href="ssl" data-i18n="[html]submenu.ssl"> </a></li>
              <li class="menu-item"><a href="email" data-i18n="[html]submenu.email"> </a></li>
              <li class="menu-item"><a href="magento" data-i18n="[html]submenu.magento"> </a> <div class="menu badge feat bg-pink">NEW</div></li>
              <li class="menu-item"><a href="database" data-i18n="[html]submenu.database"> </a></li>
              <li class="menu-item"><a href="ddos" data-i18n="[html]submenu.ddos"> </a></li>
              <li class="menu-item"><a href="datacenter" data-i18n="[html]submenu.datacenter"> </a></li>
              <li class="menu-item"><a href="about" data-i18n="[html]submenu.about"> </a></li>
              <li class="menu-item"><a href="soon" data-i18n="[html]submenu.soon"> </a></li>
              <li class="menu-item"><a href="checkout" data-i18n="[html]submenu.checkout"> </a></li>
              <li class="menu-item"><a href="cart" data-i18n="[html]submenu.cart"> </a></li>
            </ul>
          </li>
          <li class="menu-item menu-item-has-children">
            <a class="v-stroke" href="#" data-i18n="[html]header.features"></a>
            <ul class="sub-menu">
              <li class="menu-item"><a href="pricing" data-i18n="[html]submenu.pricing"> </a></li>
              <li class="menu-item"><a href="sliders" data-i18n="[html]submenu.sliders"> </a></li>
              <li class="menu-item"><a href="configurator" data-i18n="[html]submenu.config"> </a> <div class="menu badge feat bg-pink">NEW</div></li>
              <li class="menu-item"><a href="404" data-i18n="[html]submenu.error"> </a></li>
              <li class="menu-item"><a href="login" data-i18n="[html]submenu.register"> </a></li>
              <li class="menu-item"><a href="login" data-i18n="[html]header.login"> </a></li>
              <li class="menu-item"><a href="elements" data-i18n="[html]submenu.elements"> </a></li>
              <li class="menu-item"><a href="sections" data-i18n="[html]submenu.sections"> </a></li>
            </ul>
          </li>
          <li class="menu-item menu-item-has-children menu-last">
            <a class="v-stroke" href="#" data-i18n="[html]header.support"></a>
            <ul class="sub-menu">
              <li class="menu-item"><a href="knowledgebase-list" data-i18n="[html]submenu.knowlist"> </a></li>
              <li class="menu-item"><a href="knowledgebase-article" data-i18n="[html]submenu.knowarticle"> </a></li>
              <li class="menu-item"><a href="contact" data-i18n="[html]submenu.contact"> </a></li>
              <li class="menu-item"><a href="legal" data-i18n="[html]submenu.legal"> </a></li>
              <li class="menu-item"><a href="blog" data-i18n="[html]submenu.blog"> </a></li>
              <li class="menu-item"><a href="faq" data-i18n="[html]submenu.faq"> </a></li>
            </ul>
          </li>
          <li class="menu-item">
            <a class="pr-0 mr-0" href="login"> <div class="btn btn-default-yellow-fill question" data-i18n="[html]header.login"><i class="fas fa-lock pr-1"></i> </div></a>
          </li>
        </ul>
      </div>
    </nav>

#### Nav Menu Mobile:

Lets begin. Open header.html file and follow the steps. Note! The header nav mobile is loaded once from a single file (header.html) into several HTML pages ;) This presentation not includes the i18next language translation.

    <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 href="index">Home</a>
        </li>
        <li class="menu-item menu-item-has-children">
          <a>Hosting <div class="badge badge-pill bg-purple">PRO</div></a>
          <ul class="sub-menu">
            <li class="menu-item"><a href="hosting">Shared Hosting</a></li>
            <li class="menu-item"><a href="reseller">Cloud Reseller</a></li>
            <li class="menu-item"><a href="dedicated">Dedicated Server</a></li>
            <li class="menu-item"><a href="vps">Cloud VPS</a></li>
            <li class="menu-item"><a href="wordpress">WordPress Hosting</a></li>
            <li class="menu-item"><a href="domains">Domain Names</a></li>
            <li class="menu-item"><a href="developer">Developer Hosting</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="ssl">SSL Certificates</a></li>
            <li class="menu-item"><a href="email">Enterprise Email</a></li>
            <li class="menu-item"><a href="magento">Magento Pro</a></li>
            <li class="menu-item"><a href="database">Database-as-a-Service</a></li>
            <li class="menu-item"><a href="ddos">DDoS Protection</a></li>
            <li class="menu-item"><a href="datacenter">Datacenter</a></li>
            <li class="menu-item"><a href="about">About Us</a></li>
            <li class="menu-item"><a href="soon">Coming Soon</a></li>
            <li class="menu-item"><a href="checkout">Checkout</a></li>
            <li class="menu-item"><a href="cart">Cart</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="pricing">Pricing Options</a></li>
            <li class="menu-item"><a href="sliders">Content Sliders</a></li>
            <li class="menu-item"><a href="configurator">Configurator</a></li>
            <li class="menu-item"><a href="404">404 Error</a></li>
            <li class="menu-item"><a href="login">Register</a></li>
            <li class="menu-item"><a href="login">Client Area</a></li>
            <li class="menu-item"><a href="elements">Elements</a></li>
            <li class="menu-item"><a href="sections">Sections</a></li>
          </ul>
        </li>
        <li class="menu-item menu-item-has-children menu-last">
          <a>Support</a>
          <ul class="sub-menu">
            <li class="menu-item"><a href="knowledgebase-list">Knowlegebase List</a></li>
            <li class="menu-item"><a href="knowledgebase-article">Knowlegebase Article</a></li>
            <li class="menu-item"><a href="contact">Contact Us</a></li>
            <li class="menu-item"><a href="legal">Legal</a></li>
            <li class="menu-item"><a href="blog">Blog</a></li>
            <li class="menu-item"><a href="faq">Faq</a></li>
          </ul>
        </li>
        <li class="mt-4">
          <a href="tel:+0000000000"><p class="c-grey">Phone: + (123) 1300-656-1046</p></a>
          <a href="mailto:antler@mail.com"><p class="c-grey">Email: antler@mail.com</p></a>
        </li>
        <li>
          <a href="login"><div class="btn btn-default-yellow-fill mt-3">CLIENT AREA</div></a>
        </li>
      </ul>
    </nav>

# HTML Structure

##### Grid System:

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.

    <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="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/bootstrap.min.css" rel="stylesheet">
    <link href="css/owl.carousel.min.css" rel="stylesheet">
    <link href="css/swiper.min.css" rel="stylesheet">
    <link href="css/magnific-popup.css" rel="stylesheet">
    <link href="css/animate.min.css" rel="stylesheet">
    <link href="css/style.min.css" rel="stylesheet">
    <link href="css/slick.css" rel="stylesheet">

    Custom color styles:
    <link href="css/colors/pink.css" rel="stylesheet" title="pink"/>
    <link href="css/colors/blue.css" rel="stylesheet" title="blue"/>
    <link href="css/colors/green.css" rel="stylesheet" title="green"/>

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/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/wow.min.js"></script>
    <script>new WOW().init();</script>
    <script src="js/lazysize.min.js"></script>
    <script src="js/scripts.min.js"></script>

# Integration WHMCS

Believe, Antler Template it is one of the few templates in the Themeforest section that already comes with integration of login, domain search and hosting & VPS plans as example.

##### Login Integration

Please, open the login.html file and search for the below action tag:

    <form action="http://inebur.com/whmcs/dologin.php?systpl=antler" method="post" class="comments-form">

Here, in the "action" tag, put your redirect link to the WHMCS login page. We show a practical example below

    <form action="http://yourdomain.com/whmcs/dologin.php">

Now, and according the WHMCS DOCs here, do you need implement the below line code inside the "configuration.php" file, on your WHMCS root.

    $allow_external_login_forms = true;

After then, go to login page, put your access data and click the login button. You will be redirected to the home page in your WHMCS template. That's it!

##### Domains Search Integration

Please, open the "domains.html" file and search for the below action tag:

    <form class="mb-5 nomargin" action="http://inebur.com/whmcs/domainchecker.php?carttpl=antler&systpl=antler" method="post">

Here, in the "action" tag, put your redirect link to the WHMCS domain search page. We show a practical example below

    <form action="http://yourdomain.com/whmcs/domainchecker.php">

Now, go to domain page, search for your perfect domain and click the search button. You will be redirected to the domain page in your WHMCS template. That's it!

##### Hosting Plans Integration

Please, check hosting.html file in 111 line as example

    <a href="http://inebur.com/whmcs/cart.php?a=add&pid=1" class="btn btn-default-yellow-fill">Order now</a>

Here, in the "a" tag, put the direct link from your WHMCS hosting page. We show a practical example below

    <a href="http://yourdomain.com/whmcs/cart.php?a=add&pid=1"></a>

Now, go to hosting page and click the order now button. You will be redirected to the hosting page in your WHMCS template. That's it!