View file EcoHosting/ecohosting_main_files_v3.1/html-templates/version-1/index.html

File size: 50.48Kb
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    
    <meta name="description" content="">
    <meta name="author" content="">

    <title>EcoHosting - Responsive HTML5 Hosting and WHMCS Template</title>

    <!-- ====Favicons==== -->
    <link rel="shortcut icon" href="img/favicon.png" type="image/x-icon">
    <link rel="icon" href="img/favicon.png" type="image/x-icon">
    
    
    <!-- ====Google Font Stylesheet==== -->
    <link href='https://fonts.googleapis.com/css?family=Raleway:300,400,500,700,900' rel='stylesheet' type='text/css'>

    <!-- ====Font Awesome Stylesheet==== -->
    <link href="css/font-awesome.min.css" rel="stylesheet">
    
    <!-- ====jQuery UI Stylesheet==== -->
    <link href="css/jquery-ui-custom.min.css" rel="stylesheet">
    
    <!-- ====Bootstrap Stylesheet==== -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- ====Animate Stylesheet==== -->
    <link href="css/animate.min.css" rel="stylesheet">

    <!-- ====Owl Carousel Stylesheet==== -->
    <link href="css/owl.carousel.css" rel="stylesheet">
    
    <!-- ====Main Stylesheet==== -->
    <link href="style.css" rel="stylesheet">
    
    <!-- ====Responsive Stylesheet==== -->
    <link href="css/responsive-style.css" rel="stylesheet">
    
    <!-- ====Color Scheme Stylesheet==== -->
    <link href="css/colors/theme-color-1.css" rel="stylesheet" id="changeColorScheme">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
    <!-- Preloader Start -->
    <div id="preloader">
        <div class="preloader--spinners">
            <div class="preloader--spinner preloader--spinner-1"></div>
            <div class="preloader--spinner preloader--spinner-2"></div>
        </div>
    </div>
    <!-- Preloader End -->

    <!-- Menu Area Start -->
    <div id="menu">
        <!-- Menu Topbar Start -->
        <div class="menu--topbar">
            <div class="container">
                <!-- Menu Topbar Contact Start -->
                <div class="menu-topbar--contact">
                    <ul class="nav navbar-nav">
                        <li><a href="tel:+4440000000"><i class="fa fa-phone"></i>+444 000 0000</a></li>
                        <li><a href="mailto:example@example.com"><i class="fa fa-envelope"></i>example@example.com</a></li>
                    </ul>
                </div>
                <!-- Menu Topbar Contact End -->
                <!-- Menu Topbar Social Start -->
                <ul class="menu-topbar--social nav navbar-nav navbar-right">
                    <li><a href="#"><i class="fa fa-facebook"></i></a></li>
                    <li><a href="#"><i class="fa fa-twitter"></i></a></li>
                    <li><a href="#"><i class="fa fa-google-plus"></i></a></li>
                    <li><a href="#"><i class="fa fa-rss"></i></a></li>
                </ul>
                <!-- Menu Topbar Social End -->
            </div>
        </div>
        <!-- Menu Topbar End -->
        <!-- Primary Menu Start -->
        <nav id="primaryMenu" class="navbar primary-menu-two">
            <div class="container">
                <!-- Logo Start -->
                <div class="primary--logo">
                    <h1><a href="index.html"><span><i class="fa fa-tree"></i>Eco</span>Hosting</a></h1>
                </div>
                <!-- Logo End -->
                <div class="primary--info clearfix">
                    <div class="primary--info-item">
                        <div class="primary--icon">
                            <img src="img/top-bar-icons/01.png" alt="" class="img-responsive">
                        </div>
                        <div class="primary--content">
                            <p class="count">24/7 Support</p>
                            <p>Lorem ipsum dolor</p>
                        </div>
                    </div>
                    <div class="primary--info-item">
                        <div class="primary--icon">
                            <img src="img/top-bar-icons/02.png" alt="" class="img-responsive">
                        </div>
                        <div class="primary--content">
                            <p class="count">45 Day Guarantee</p>
                            <p>Lorem ipsum dolor</p>
                        </div>
                    </div>
                    <div class="primary--info-item">
                        <div class="primary--icon">
                            <img src="img/top-bar-icons/03.png" alt="" class="img-responsive">
                        </div>
                        <div class="primary--content">
                            <p class="count">99.9% Uptime</p>
                            <p>Lorem ipsum dolor</p>
                        </div>
                    </div>
                </div>
            </div>
        </nav>
        <!-- Primary Menu End -->

        <!-- Secondary Menu Start -->
        <nav id="secondaryMenu" class="navbar">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#secondaryNavbar" aria-expanded="false" aria-controls="secondaryNavbar">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <div class="login-btn hidden-lg hidden-md hidden-sm">
                        <a href="login.html" class="btn">Client Area</a>
                    </div>
                </div>
                <!-- Secondary Menu Links Start -->
                <div id="secondaryNavbar" class="reset-padding navbar-collapse collapse">
                    <ul class="secondary-menu-links nav navbar-nav">
                        <li class="dropdown active">
                            <a href="#" data-toggle="dropdown">Home<span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li class="active"><a href="../version-1/index.html">Home Version 1</a></li>
                                <li><a href="../version-2/index.html">Home Version 2</a></li>
                                <li><a href="../version-3/index.html">Home Version 3</a></li>
                            </ul>
                        </li>
                        <li class="dropdown">
                            <a href="#" data-toggle="dropdown">Hosting<span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li><a href="shared-hosting.html">Shared Hosting</a></li>
                                <li><a href="reseller-hosting.html">Reseller Hosting</a></li>
                                <li><a href="vps-hosting.html">VPS Hosting</a></li>
                                <li><a href="dedicated-hosting.html">Dedicated Hosting</a></li>
                            </ul>
                        </li>
                        <li><a href="domains.html">Domains</a></li>
                        <li class="dropdown">
                            <a href="#" data-toggle="dropdown">Pages<span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li><a href="about.html">About</a></li>
                                <li><a href="faq.html">FAQ</a></li>
                                <li><a href="testimonial.html">Testimonial</a></li>
                                <li><a href="login.html">Login</a></li>
                                <li><a href="affiliate.html">Affiliate</a></li>
                                <li><a href="404.html">404</a></li>
                            </ul>
                        </li>
                        <li class="dropdown">
                            <a href="#" data-toggle="dropdown">Blog<span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li><a href="blog.html">Blog</a></li>
                                <li><a href="blog_sidebar-left.html">Blog Details Left</a></li>
                                <li><a href="blog_sidebar-right.html">Blog Details Right</a></li>
                            </ul>
                        </li>
                        <li><a href="contact.html">Contact</a></li>
                    </ul>
                    <ul class="secondary-menu-links nav navbar-nav navbar-right hidden-xs">
                        <li><a href="login.html" class="btn">Client Area</a></li>
                    </ul>
                </div>
                <!-- Secondary Menu Links End -->
            </div>
        </nav>
        <!-- Secondary Menu End -->
    </div>
    <!-- Menu Area End -->
    
    <!-- Header Area Start -->
    <div id="header" data-bg-src="img/background-img/slider-bg-1.jpg" class="HeaderAdjust">
        <!-- Header Slider Start -->
        <div class="header-slider">
            <div class="header-slider--item header-slider--item-1">
                <div class="container">
                    <div class="row">
                        <div class="col-md-5 header-item-content-holder">
                            <div class="vc-parent">
                                <div class="vc-child">
                                    <!-- Header Slider Content Start -->
                                    <div class="header-item-content">
                                        <h2>Shared Hosting</h2>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis dolores ducimus pariatur optio sint autem odio.</p>
                                        <div class="list clearfix">
                                            <p><i class="fa fa-check"></i>Lorem ipsum dolor sit</p>
                                            <p><i class="fa fa-check"></i>Lorem ipsum dolor sit</p>
                                            <p><i class="fa fa-check"></i>Lorem ipsum dolor sit</p>
                                            <p><i class="fa fa-check"></i>Lorem ipsum dolor sit</p>
                                        </div>
                                        <div class="price">
                                            <a href="#" class="btn btn-lg btn-custom-reverse">View Details</a>
                                        </div>
                                    </div>
                                    <!-- Header Slider Content End -->
                                </div>
                            </div>
                        </div>
                        <div class="col-md-7 header-item-img">
                            <div class="vc-parent">
                                <div class="vc-child">
                                    <figure class="clearfix">
                                        <img src="img/header-slider-img/01.png" alt="" class="img-responsive owl-fadeInUp">
                                        <figcaption>
                                            <div class="header-item-badge header-item-badge-1 owl-fadeInLeft">
                                                <p>Starting at<span>$4.99</span>/year</p>
                                            </div>
                                            <div class="header-item-badge header-item-badge-2 owl-fadeInRight">
                                                <p>Up To<span>10%</span>OFF</p>
                                            </div>
                                        </figcaption>
                                    </figure>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="header-slider--item header-slider--item-2">
                <div class="container">
                    <div class="row">
                        <div class="col-md-5 header-item-content-holder">
                            <div class="vc-parent">
                                <div class="vc-child">
                                    <!-- Header Slider Content Start -->
                                    <div class="header-item-content">
                                        <h2>Reseller Hosting</h2>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis dolores ducimus pariatur optio sint autem odio.</p>
                                        <div class="list clearfix">
                                            <p><i class="fa fa-check"></i>Lorem ipsum dolor sit</p>
                                            <p><i class="fa fa-check"></i>Lorem ipsum dolor sit</p>
                                            <p><i class="fa fa-check"></i>Lorem ipsum dolor sit</p>
                                            <p><i class="fa fa-check"></i>Lorem ipsum dolor sit</p>
                                        </div>
                                        <div class="price">
                                            <a href="#" class="btn btn-lg btn-custom-reverse">View Details</a>
                                        </div>
                                    </div>
                                    <!-- Header Slider Content End -->
                                </div>
                            </div>
                        </div>
                        <div class="col-md-7 header-item-img">
                            <div class="vc-parent">
                                <div class="vc-child">
                                    <figure class="clearfix">
                                        <img src="img/header-slider-img/02.png" alt="" class="img-responsive owl-fadeInUp">
                                        <figcaption>
                                            <div class="header-item-badge header-item-badge-1 owl-fadeInLeft">
                                                <p>Starting at<span>$9.99</span>/year</p>
                                            </div>
                                            <div class="header-item-badge header-item-badge-2 owl-fadeInRight">
                                                <p>Up To<span>10%</span>OFF</p>
                                            </div>
                                        </figcaption>
                                    </figure>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="header-slider--item header-slider--item-3">
                <div class="container">
                    <div class="row">
                        <div class="col-md-5 header-item-content-holder">
                            <div class="vc-parent">
                                <div class="vc-child">
                                    <!-- Header Slider Content Start -->
                                    <div class="header-item-content">
                                        <h2>VPS Hosting</h2>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis dolores ducimus pariatur optio sint autem odio.</p>
                                        <div class="list clearfix">
                                            <p><i class="fa fa-check"></i>Lorem ipsum dolor sit</p>
                                            <p><i class="fa fa-check"></i>Lorem ipsum dolor sit</p>
                                            <p><i class="fa fa-check"></i>Lorem ipsum dolor sit</p>
                                            <p><i class="fa fa-check"></i>Lorem ipsum dolor sit</p>
                                        </div>
                                        <div class="price">
                                            <a href="#" class="btn btn-lg btn-custom-reverse">View Details</a>
                                        </div>
                                    </div>
                                    <!-- Header Slider Content End -->
                                </div>
                            </div>
                        </div>
                        <div class="col-md-7 header-item-img">
                            <div class="vc-parent">
                                <div class="vc-child">
                                    <figure class="clearfix">
                                        <img src="img/header-slider-img/03.png" alt="" class="img-responsive owl-fadeInUp">
                                        <figcaption>
                                            <div class="header-item-badge header-item-badge-1 owl-fadeInLeft">
                                                <p>Starting at<span>$49.99</span>/year</p>
                                            </div>
                                            <div class="header-item-badge header-item-badge-2 owl-fadeInRight">
                                                <p>Up To<span>10%</span>OFF</p>
                                            </div>
                                        </figcaption>
                                    </figure>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="header-slider--item header-slider--item-4">
                <div class="container">
                    <div class="row">
                        <div class="col-md-5 header-item-content-holder">
                            <div class="vc-parent">
                                <div class="vc-child">
                                    <!-- Header Slider Content Start -->
                                    <div class="header-item-content">
                                        <h2>Dedicated Server</h2>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis dolores ducimus pariatur optio sint autem odio.</p>
                                        <div class="list clearfix">
                                            <p><i class="fa fa-check"></i>Lorem ipsum dolor sit</p>
                                            <p><i class="fa fa-check"></i>Lorem ipsum dolor sit</p>
                                            <p><i class="fa fa-check"></i>Lorem ipsum dolor sit</p>
                                            <p><i class="fa fa-check"></i>Lorem ipsum dolor sit</p>
                                        </div>
                                        <div class="price">
                                            <a href="#" class="btn btn-lg btn-custom-reverse">View Details</a>
                                        </div>
                                    </div>
                                    <!-- Header Slider Content End -->
                                </div>
                            </div>
                        </div>
                        <div class="col-md-7 header-item-img">
                            <div class="vc-parent">
                                <div class="vc-child">
                                    <figure class="clearfix">
                                        <img src="img/header-slider-img/04.png" alt="" class="img-responsive owl-fadeInUp">
                                        <figcaption>
                                            <div class="header-item-badge header-item-badge-1 owl-fadeInLeft">
                                                <p>Starting at<span>$99.99</span>/year</p>
                                            </div>
                                            <div class="header-item-badge header-item-badge-2 owl-fadeInRight">
                                                <p>Up To<span>10%</span>OFF</p>
                                            </div>
                                        </figcaption>
                                    </figure>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Header Slider End -->
        <!-- Header Slider Nav Start -->
        <div class="header--slider-nav">
            <div class="container">
                <ul>
                    <li class="active"><p><i class="fa fa-laptop"></i><span>Shared Hosting</span></p></li>
                    <li><p><i class="fa fa-hdd-o"></i><span>Reseller Hosting</span></p></li>
                    <li><p><i class="fa fa-cloud"></i><span>VPS Hosting</span></p></li>
                    <li><p><i class="fa fa-server"></i><span>Dedicated Server</span></p></li>
                </ul>
            </div>
        </div>
        <!-- Header Slider Nav End -->
    </div>
    <!-- Header Area End -->
    
    <!-- Domain Search Area Start -->
    <div id="offer">
        <div class="container">
            <div class="row content">
                <div class="col-md-3 left-content">
                    <p><span>Looking a Premium Quality</span> Domain Name?</p>
                </div>
                <div class="col-md-9 right-content">
                    <div class="row">
                        <div class="col-md-8">
                            <!-- Offer Form Start -->
                            <form action="http://billing.ywhmcs.com/domainchecker.php?systpl=EcoHostingV1" method="post" id="domainSearchForm">
                                <div class="row reset-gutter">
                                    <div class="col-sm-6">
                                        <input class="form-control" name="domain" type="text" placeholder="Enter your domain">
                                    </div>
                                    <div class="col-sm-3 select-box">
                                        <select class="form-control" name="ext">
                                            <option>.com</option>
                                            <option>.net</option>
                                            <option>.org</option>
                                            <option>.info</option>
                                            <option>.us</option>
                                            <option>.eu</option>
                                        </select>
                                    </div>
                                    <div class="col-sm-3">
                                        <button class="btn submit-button-custom" type="submit">SEARCH</button>
                                    </div>
                                </div>
                            </form>
                            <!-- Offer Form End -->
                            <div class="domain--offer">
                                <span>Get 10% Off Today To Register A Domain</span>
                            </div>
                        </div>
                        <div class="col-md-4 hidden-sm hidden-xs">
                            <div class="row domain-ext hidden-xs">
                                <div class="col-sm-4">
                                    <div class="extension">
                                        <span class="name">.com</span>
                                        <span>$3.99/y</span>
                                    </div>
                                </div>
                                <div class="col-sm-4">
                                    <div class="extension">
                                        <span class="name">.net</span>
                                        <span>$3.99/y</span>
                                    </div>
                                </div>
                                <div class="col-sm-4">
                                    <div class="extension">
                                        <span class="name">.org</span>
                                        <span>$3.99/y</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Domain Search Area End -->
    
    <!-- Features Area Start -->
    <div id="features">
        <div class="container">
            <!-- Section Title Start -->
            <div class="section-title">
                <h2>why choose us</h2>
            </div>
            <!-- Section Title End -->
            <div class="row vc--features">
                <div class="col-md-4 features--img">
                    <img src="img/features-img/cloudHosting.png" alt="" class="img-responsive">
                </div>
                <div class="col-md-8">
                    <div class="row">
                        <!-- Feature Item Start -->
                        <div class="col-md-4 col-sm-6 feature-item">
                            <div class="feature-item-icon">
                                <img src="img/features-img/01.png" alt="" class="img-responsive">
                            </div>
                            <div class="feature-item-content">
                                <h4>Firewall</h4>
                                <p>Lorem ipsum dolor sit amet elite, consectetur adipisicing.</p>
                            </div>
                        </div>
                        <!-- Feature Item End -->
                        <!-- Feature Item Start -->
                        <div class="col-md-4 col-sm-6 feature-item">
                            <div class="feature-item-icon">
                                <img src="img/features-img/02.png" alt="" class="img-responsive">
                            </div>
                            <div class="feature-item-content">
                                <h4>Data Encryption</h4>
                                <p>Lorem ipsum dolor sit amet elite, consectetur adipisicing.</p>
                            </div>
                        </div>
                        <!-- Feature Item End -->
                        <!-- Feature Item Start -->
                        <div class="col-md-4 col-sm-6 feature-item">
                            <div class="feature-item-icon">
                                <img src="img/features-img/03.png" alt="" class="img-responsive">
                            </div>
                            <div class="feature-item-content">
                                <h4>Data Analysis</h4>
                                <p>Lorem ipsum dolor sit amet elite, consectetur adipisicing.</p>
                            </div>
                        </div>
                        <!-- Feature Item End -->
                        <!-- Feature Item Start -->
                        <div class="col-md-4 col-sm-6 feature-item">
                            <div class="feature-item-icon">
                                <img src="img/features-img/04.png" alt="" class="img-responsive">
                            </div>
                            <div class="feature-item-content">
                                <h4>Data Protection</h4>
                                <p>Lorem ipsum dolor sit amet elite, consectetur adipisicing.</p>
                            </div>
                        </div>
                        <!-- Feature Item End -->
                        <!-- Feature Item Start -->
                        <div class="col-md-4 col-sm-6 feature-item">
                            <div class="feature-item-icon">
                                <img src="img/features-img/05.png" alt="" class="img-responsive">
                            </div>
                            <div class="feature-item-content">
                                <h4>Support Center</h4>
                                <p>Lorem ipsum dolor sit amet elite, consectetur adipisicing.</p>
                            </div>
                        </div>
                        <!-- Feature Item End -->
                        <!-- Feature Item Start -->
                        <div class="col-md-4 col-sm-6 feature-item">
                            <div class="feature-item-icon">
                                <img src="img/features-img/06.png" alt="" class="img-responsive">
                            </div>
                            <div class="feature-item-content">
                                <h4>Technical Service</h4>
                                <p>Lorem ipsum dolor sit amet elite, consectetur adipisicing.</p>
                            </div>
                        </div>
                        <!-- Feature Item End -->
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Features Area End -->
    
    <!-- Single Features Area Start -->
    <div id="singleFeatures">
        <div class="single-feature single-feature-1" data-bg-src="img/background-img/single-feature-1-bg.png">
            <div class="container">
                <div class="row">
                    <div class="col-md-5 single-feature--image">
                        <img src="img/features-img/drag-and-drop.png" alt="" class="img-responsive">
                    </div>
                    <div class="col-md-7 single-feature--content">
                        <h2>Drag and Drop Website Builder</h2>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam cum delectus, sunt eos esse quasi dignissimos. Minima deserunt nobis molestias voluptatum ut sunt sapiente quia? Totam consequatur, excepturi error sint.</p>
                        <a href="#" class="btn btn-custom-reverse">Read More</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="single-feature single-feature-2">
            <div class="container">
                <div class="row">
                    <div class="col-md-7 single-feature--content">
                        <h2>Get Started Quickly &amp; Easily</h2>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam cum delectus, sunt eos esse quasi dignissimos. Minima deserunt nobis molestias voluptatum ut sunt sapiente quia? Totam consequatur, excepturi error sint.</p>
                        <a href="#" class="btn btn-custom-reverse">Read More</a>
                    </div>
                    <div class="col-md-5 single-feature--image">
                        <img src="img/features-img/softaculous.png" alt="" class="img-responsive">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Single Features Area End -->
    
    <!-- Counter Area Start -->
    <div class="counter" data-bg-src="img/background-img/counter-bg.png">
        <div class="container">
            <div class="row">
                <div class="col-sm-3 col-xs-6">
                    <!-- Counter Item Start -->
                    <div class="counter-holder">
                        <div class="counter-icon"><img src="img/counter-img/01.jpg" alt="" class="img-responsive"></div>
                        <p class="counter-text">cloud servers sold</p>
                        <div class="counter-number">400</div>
                    </div>
                    <!-- Counter Item End -->
                </div>
                <div class="col-sm-3 col-xs-6">
                    <!-- Counter Item Start -->
                    <div class="counter-holder">
                        <div class="counter-icon"><img src="img/counter-img/02.jpg" alt="" class="img-responsive"></div>
                        <p class="counter-text">dedicated servers sold</p>
                        <div class="counter-number">2,500</div>
                    </div>
                    <!-- Counter Item End -->
                </div>
                <div class="col-sm-3 col-xs-6">
                    <!-- Counter Item Start -->
                    <div class="counter-holder">
                        <div class="counter-icon"><img src="img/counter-img/03.jpg" alt="" class="img-responsive"></div>
                        <p class="counter-text">shared hosting sold</p>
                        <div class="counter-number">9,815</div>
                    </div>
                    <!-- Counter Item End -->
                </div>
                <div class="col-sm-3 col-xs-6">
                    <!-- Counter Item Start -->
                    <div class="counter-holder">
                        <div class="counter-icon"><img src="img/counter-img/04.jpg" alt="" class="img-responsive"></div>
                        <p class="counter-text">happy clients</p>
                        <div class="counter-number">8,815</div>
                    </div>
                    <!-- Counter Item End -->
                </div>
            </div>
        </div>
    </div>
    <!-- Counter Area End -->
    
    <!-- Pricing Area Start -->
    <div id="pricing">
        <div class="container">
            <!-- Section Title Start -->
            <div class="section-title">
                <h2>Populer Pricing</h2>
            </div>
            <!-- Section Title End -->
            <div class="row">
                <div class="col-md-3 col-sm-6">
                    <!-- Pricing Table Item Start -->
                    <div class="pricing-table-item">
                        <div class="pt-head">
                            <div class="caption">Starting At</div>
                            <div class="pt-price-tag">$9.99<span>/m</span></div>
                            <div class="pt-plan">shared hosting</div>
                        </div>
                        <div class="pt-body">
                            <div class="pt-features">
                                <ul>
                                    <li>2GB RAM</li>
                                    <li>20GB SSD Cloud Storage</li>
                                    <li>Weekly Backups</li>
                                    <li>DDoS Protection</li>
                                    <li>Full Root Access</li>
                                    <li>24/7/365 Tech Support</li>
                                </ul>
                            </div>
                        </div>
                        <div class="pt-footer">
                            <a href="#" class="btn btn-custom-reverse">Buy Now</a>
                        </div>
                    </div>
                    <!-- Pricing Table Item End -->
                </div>
                <div class="col-md-3 col-sm-6">
                    <!-- Pricing Table Item Start -->
                    <div class="pricing-table-item">
                        <div class="pt-head">
                            <div class="caption">Starting At</div>
                            <div class="pt-price-tag">$29.99<span>/m</span></div>
                            <div class="pt-plan">reseller hosting</div>
                        </div>
                        <div class="pt-body">
                            <div class="pt-features">
                                <ul>
                                    <li>4GB RAM</li>
                                    <li>50GB SSD Cloud Storage</li>
                                    <li>Weekly Backups</li>
                                    <li>DDoS Protection</li>
                                    <li>Full Root Access</li>
                                    <li>24/7/365 Tech Support</li>
                                </ul>
                            </div>
                        </div>
                        <div class="pt-footer">
                            <a href="#" class="btn btn-custom-reverse">Buy Now</a>
                        </div>
                    </div>
                    <!-- Pricing Table Item End -->
                </div>
                <div class="col-md-3 col-sm-6">
                    <!-- Pricing Table Item Start -->
                    <div class="pricing-table-item">
                        <div class="pt-head">
                            <div class="caption">Starting At</div>
                            <div class="pt-price-tag">$49.99<span>/m</span></div>
                            <div class="pt-plan">cloud vps</div>
                        </div>
                        <div class="pt-body">
                            <div class="pt-features">
                                <ul>
                                    <li>8GB RAM</li>
                                    <li>80GB SSD Cloud Storage</li>
                                    <li>Weekly Backups</li>
                                    <li>DDoS Protection</li>
                                    <li>Full Root Access</li>
                                    <li>24/7/365 Tech Support</li>
                                </ul>
                            </div>
                        </div>
                        <div class="pt-footer">
                            <a href="#" class="btn btn-custom-reverse">Buy Now</a>
                        </div>
                    </div>
                    <!-- Pricing Table Item End -->
                </div>
                <div class="col-md-3 col-sm-6">
                    <!-- Pricing Table Item Start -->
                    <div class="pricing-table-item">
                        <div class="pt-head">
                            <div class="caption">Starting At</div>
                            <div class="pt-price-tag">$99.99<span>/m</span></div>
                            <div class="pt-plan">dedicated servers</div>
                        </div>
                        <div class="pt-body">
                            <div class="pt-features">
                                <ul>
                                    <li>16GB RAM</li>
                                    <li>100GB SSD Cloud Storage</li>
                                    <li>Weekly Backups</li>
                                    <li>DDoS Protection</li>
                                    <li>Full Root Access</li>
                                    <li>24/7/365 Tech Support</li>
                                </ul>
                            </div>
                        </div>
                        <div class="pt-footer">
                            <a href="#" class="btn btn-custom-reverse">Buy Now</a>
                        </div>
                    </div>
                    <!-- Pricing Table Item End -->
                </div>
            </div>
        </div>
    </div>
    <!-- Pricing Area End -->
    
    <!-- Certificate Area Start -->
    <div id="certificate">
        <div class="container">
            <h2 class="h1">100% Powered by Certified Green Renewable Energy Sources</h2>
            <div class="certificate--img">
                <img src="https://www.hostpapa.eu/assets/green/bef.jpg" alt="">
                <img src="https://www.hostpapa.eu/assets/green/greentags.jpg" alt="">
            </div>
        </div>
    </div>
    <!-- Certificate Area Start -->
    
    <!-- Testimonial Area Start -->
    <div id="testimonial" data-bg-src="img/background-img/testimonial-bg.jpg">
        <div class="section-title">
            <h2>testimonial</h2>
        </div>
        <div class="testimonial-slider">
            <!-- Testimonial Item Start -->
            <div class="testimonial-item" data-recommender-thumb="img/testimonial-img/01.jpg">
                <div class="recommender-comment">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum similique ad, magnam, odit repellat reprehenderit. Consequatur consectetur aspernatur ad assumenda a. Aspernatur fugit numquam quod rerum sint facere ex ullam. A, blanditiis quod, tempore magni veniam perferendis aliquid vitae saepe.</p>
                </div>
                <div class="recommender-info">
                    <span class="recommender-name">Mohammad Al Omayer,</span>
                    <span class="recommender-role">Company</span>
                </div>
            </div>
            <!-- Testimonial Item End -->
            <!-- Testimonial Item Start -->
            <div class="testimonial-item" data-recommender-thumb="img/testimonial-img/02.jpg">
                <div class="recommender-comment">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum similique ad, magnam, odit repellat reprehenderit. Consequatur consectetur aspernatur ad assumenda a. Aspernatur fugit numquam quod rerum sint facere ex ullam. A, blanditiis quod, tempore magni veniam perferendis aliquid vitae saepe.</p>
                </div>
                <div class="recommender-info">
                    <span class="recommender-name">Mohammad Al Omayer,</span>
                    <span class="recommender-role">Company</span>
                </div>
            </div>
            <!-- Testimonial Item End -->
            <!-- Testimonial Item Start -->
            <div class="testimonial-item" data-recommender-thumb="img/testimonial-img/03.jpg">
                <div class="recommender-comment">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum similique ad, magnam, odit repellat reprehenderit. Consequatur consectetur aspernatur ad assumenda a. Aspernatur fugit numquam quod rerum sint facere ex ullam. A, blanditiis quod, tempore magni veniam perferendis aliquid vitae saepe.</p>
                </div>
                <div class="recommender-info">
                    <span class="recommender-name">Mohammad Al Omayer,</span>
                    <span class="recommender-role">Company</span>
                </div>
            </div>
            <!-- Testimonial Item End -->
        </div>
    </div>
    <!-- Testimonial Area End -->
   
    <!-- Datacenter Locations Area Start -->
    <div id="datacenterLocations">
        <div class="container">
            <!-- Section Title Start -->
            <div class="section-title">
                <h2>our Datacenter</h2>
            </div>
            <!-- Section Title End -->
            <div class="datacenter-locations">
                <img src="img/world-map.svg" alt="" class="img-responsive">
                <div class="datacenter-location-marker marker-1">
                    <i class="fa fa-map-marker" data-toggle="tooltip" data-placement="top" title="Phoenix, USA"></i>
                </div>
                <div class="datacenter-location-marker marker-2">
                    <i class="fa fa-map-marker" data-toggle="tooltip" data-placement="top" title="Lansing, USA"></i>
                </div>
                <div class="datacenter-location-marker marker-3">
                    <i class="fa fa-map-marker" data-toggle="tooltip" data-placement="top" title="London, UK"></i>
                </div>
                <div class="datacenter-location-marker marker-4">
                    <i class="fa fa-map-marker" data-toggle="tooltip" data-placement="top" title="New&nbsp;Delhi, India"></i>
                </div>
                <div class="datacenter-location-marker marker-5">
                    <i class="fa fa-map-marker" data-toggle="tooltip" data-placement="top" title="Singapore"></i>
                </div>
                <div class="datacenter-location-marker marker-6">
                    <i class="fa fa-map-marker" data-toggle="tooltip" data-placement="top" title="Germany"></i>
                </div>
            </div>
        </div>
    </div>
    <!-- Datacenter Locations Area End -->
    
    <!-- Brands Area Start -->
    <div id="brands">
        <div class="container">
            <div class="row brands-slider reset-margin">
                <!-- Brands Item Start -->
                <div class="col-md-12">
                    <img src="img/brands-img/01.png" alt="" class="img-responsive">
                </div>
                <!-- Brands Item End -->
                <!-- Brands Item Start -->
                <div class="col-md-12">
                    <img src="img/brands-img/02.png" alt="" class="img-responsive">
                </div>
                <!-- Brands Item End -->
                <!-- Brands Item Start -->
                <div class="col-md-12">
                    <img src="img/brands-img/03.png" alt="" class="img-responsive">
                </div>
                <!-- Brands Item End -->
                <!-- Brands Item Start -->
                <div class="col-md-12">
                    <img src="img/brands-img/04.png" alt="" class="img-responsive">
                </div>
                <!-- Brands Item End -->
                <!-- Brands Item Start -->
                <div class="col-md-12">
                    <img src="img/brands-img/05.png" alt="" class="img-responsive">
                </div>
                <!-- Brands Item End -->
                <!-- Brands Item Start -->
                <div class="col-md-12">
                    <img src="img/brands-img/06.png" alt="" class="img-responsive">
                </div>
                <!-- Brands Item End -->
            </div>
        </div>
    </div>
    <!-- Brands Area End -->
    
    <!-- Footer Area Start -->
    <div id="footer">
        <div class="container">
            <div class="row">
                <!-- Footer About Widget Start -->
                <div class="col-md-6 footer-widget">
                    <div class="footer-about">
                        <!-- Footer Title Start -->
                        <h4>About Us</h4>
                        <!-- Footer Title End -->
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum quod mollitia quisquam. Architecto quam in atque sint voluptatem, consequatur consectetur ab ipsum maxime quod consequuntur excepturi illum dolorem ex modi.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur animi id ex perspiciatis distinctio sequi minima. Velit inventore fugit, quisquam molestias nesciunt dolorem reprehenderit temporibus unde, cupiditate pariatur libero dolorum!</p>
                        <a href="about.html" class="btn btn-custom-reverse">Read More</a>
                    </div>
                </div>
                <!-- Footer About Widget End -->
                <!-- Footer Subscribe Widget Start -->
                <div class="col-md-3 col-sm-6 footer-widget">
                    <!-- Footer Title Start -->
                    <h4>Subscribe</h4>
                    <!-- Footer Title End -->
                    <!-- Subscribe Form Start -->
                    <form action="http://themelooks.us12.list-manage.com/subscribe/post?u=50e1e21235cbd751ab4c1ebaa&amp;id=ac81d988e4" method="post" name="mc-embedded-subscribe-form" target="_blank" id="subscribeForm" novalidate="novalidate">
                        <input type="text" name="MERGE1" placeholder="Enter your full name" class="input-box">
                        <input type="text" name="EMAIL" placeholder="Enter your email address" class="input-box">
                        <input type="submit" value="Subscribe" class="submit-button">
                    </form>
                    <!-- Subscribe Form End -->
                </div>
                <!-- Footer Subscribe Widget End -->
                <!-- Footer Widget Start -->
                <div class="col-md-3 col-sm-6 footer-widget">
                    <!-- Footer Title Start -->
                    <h4>Company</h4>
                    <!-- Footer Title End -->
                    <ul>
                        <li><a href="#">About Us</a></li>
                        <li><a href="#">Privacy Policy</a></li>
                        <li><a href="#">Acceptable Usage Policy</a></li>
                        <li><a href="#">Terms &amp; Conditions</a></li>
                        <li><a href="#">DMCA Policy</a></li>
                    </ul>
                </div>
                <!-- Footer Widget End -->
            </div>
        </div>
        <div class="contact-info">
            <div class="container">
                <div class="row">
                    <!-- Contact Info Item Start -->
                    <div class="col-md-3 col-xs-6">
                        <i class="fa fa-headphones"></i>
                        <a href="#">24/7 Customer Support</a>
                    </div>
                    <!-- Contact Info Item End -->
                    <!-- Contact Info Item Start -->
                    <div class="col-md-3 col-xs-6">
                        <i class="fa fa-envelope-o"></i>
                        <a href="#">support@example.com</a>
                    </div>
                    <!-- Contact Info Item End -->
                    <!-- Contact Info Item Start -->
                    <div class="col-md-3 col-xs-6">
                        <i class="fa fa-comments-o"></i>                    
                        <a href="#">Click Here To Live Chat</a>
                    </div>
                    <!-- Contact Info Item End -->
                    <!-- Contact Info Item Start -->
                    <div class="col-md-3 col-xs-6">
                        <i class="fa fa-phone"></i>
                        <a href="#">+44 000 000 000</a>
                    </div>
                    <!-- Contact Info Item End -->
                </div>
            </div>
        </div>
    </div>
    <!-- Footer Area End -->
    
    <!-- Copyright Area Start -->
    <div id="copyright">
        <div class="container">
            <!-- Copyright Text Start -->
            <p class="left">Copyright 2018 &copy; <a href="#">EcoHosting</a>. All Rights Reserved.</p>
            <!-- Copyright Text End -->
            <p class="right">We Accept: <img src="img/payment-methods.png" alt=""></p>
        </div>
    </div>
    <!-- Copyright Area End -->
    
    <!-- Back To Top Button Start -->
    <div id="backToTop">
        <a href="#top"><i class="fa fa-angle-up"></i></a>
    </div>
    <!-- Back To Top Button Start -->

    <!-- ====jQuery Library==== -->
    <script src="js/jquery-3.1.0.min.js"></script>

    <!-- ====jQuery UI Library==== -->
    <script src="js/jquery-ui-custom.min.js"></script>

    <!-- ====Bootstrap Library==== -->
    <script src="js/bootstrap.min.js"></script>

    <!-- ====jQuery Validation Plugin==== -->
    <script src="js/jquery.validate.min.js"></script>

    <!-- ====Owl Carousel Plugin==== -->
    <script src="js/owl.carousel.min.js"></script>

    <!-- ====jQuery Waypoints Plugin==== -->
    <script src="js/jquery.waypoints.min.js"></script>

    <!-- ====jQuery Counter Plugin==== -->
    <script src="js/jquery.counterup.min.js"></script>
    
    <!-- ====jQuery UI Touch Punch Plugin==== -->
    <script src="js/jquery.ui.touch-punch.min.js"></script>
    
    <!-- ====RetinaJS Plugin==== -->
    <script src="js/retina.min.js"></script>

    <!-- ====Main Script==== -->
    <script src="js/main.js"></script>
</body>
</html>