模板描述：綠色大氣風格 VPN 服務器托管，綠色大氣風格的VPN服務器托管企業網站源碼下載html模板下載
代碼結構
1. 引入CSS
<link href="https://fonts.googleapis.com/css?family=Cabin:400,400i,500i,700%7CRoboto:400,500,700" rel="stylesheet"> <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="plugins/swiper/swiper.min.css"> <link rel="stylesheet" href="plugins/magnific-popup/magnific-popup.min.css"> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/responsive.css"> <link rel="stylesheet" href="css/colors/theme-color-1.css"> <link rel="stylesheet" href="css/custom.css">
2. 引入JS
<script src="js/jquery-3.2.1.min.js"></script> <script src="js/fontawesome-all.min.js"></script> <script src="js/bootstrap.bundle.min.js"></script> <script src="plugins/typed.js/typed.min.js"></script> <script src="plugins/waypoints/jquery.waypoints.min.js"></script> <script src="plugins/waypoints/sticky.min.js"></script> <script src="plugins/swiper/swiper.min.js"></script> <script src="plugins/particles.js/particles.min.js"></script> <script src="plugins/particles.js/particles.settings.js"></script> <script src="plugins/magnific-popup/jquery.magnific-popup.min.js"></script> <script src="plugins/parsley/parsley.min.js"></script> <script src="plugins/parallax/parallax.min.js"></script> <script src="plugins/retinajs/retina.min.js"></script> <script src="js/menu.min.js"></script> <script src="js/scripts.js"></script> <script src="js/custom.js"></script>
3. HTML代碼
<!-- Preloader -->
<div class="preLoader"></div>
<!-- Main header -->
<header class="header">
<div class="header-top bg-primary" data-animate="fadeInDown" data-delay=".5">
<div class="container">
<div class="row align-items-center">
<div class="col-md-9">
<!-- Header info -->
<ul class="header-info list-inline text-white mb-md-0">
<li>Your IP : 192.168.0.102</li>
<li>Your Location : Dhaka, Bangladesh</li>
<li>Your Status : <span>Unprotected</span></li>
</ul>
</div>
<div class="col-md-3 d-none d-md-block">
<!-- Header social icons -->
<ul class="social-icons text-right list-inline m-0">
<li><a href="#" target="_blank"><i class="fab fa-facebook-f"></i></a></li>
<li><a href="#" target="_blank"><i class="fab fa-twitter"></i></a></li>
<li><a href="#" target="_blank"><i class="fab fa-google-plus-g"></i></a></li>
<li><a href="#" target="_blank"><i class="fab fa-linkedin-in"></i></a></li>
<li><a href="#" target="_blank"><i class="fab fa-vimeo-v"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="main-header">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-2 col-md-3 col-sm-3 col-9">
<!-- Logo -->
<div class="logo" data-animate="fadeInUp" data-delay=".7">
<a href="index.html">
<img src="img/logo.png" alt="VPNet">
</a>
</div>
</div>
<div class="col-lg-7 col-md-5 col-sm-3 col-3">
<nav data-animate="fadeInUp" data-delay=".9">
<!-- Header-menu -->
<div class="header-menu">
<ul>
<li class="active"><a href="home.html">Home</a></li>
<li>
<a href="#">Pages <i class="fas fa-caret-down"></i></a>
<ul>
<li><a href="about.html">About</a></li>
<li>
<a href="#">Team Members <i class="fas fa-caret-right"></i></a>
<ul>
<li><a href="team-grid-3.html">3 Columns</a></li>
<li><a href="team-grid-4.html">4 Columns</a></li>
</ul>
</li>
<li><a href="affiliate.html">Affiliate Program</a></li>
<li><a href="pricing.html">Pricing Plans</a></li>
<li><a href="testimonials.html">Testimonials</a></li>
<li><a href="service-details.html">Service Details</a></li>
<li><a href="404.html">404</a></li>
</ul>
</li>
<li>
<a href="#">Blog <i class="fas fa-caret-down"></i></a>
<ul>
<li><a href="blog.html">Full Width</a></li>
<li><a href="blog-sidebar-left.html">Blog Sidebar Left</a></li>
<li><a href="blog-sidebar-right.html">Blog Sidebar Right</a></li>
<li><a href="blog-2-columns.html">2 Columns Blog</a></li>
<li><a href="blog-3-columns.html">3 Columns Blog</a></li>
<li><a href="blog-details.html">Blog Details</a></li>
</ul>
</li>
<li><a href="faq.html">FAQ</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
<!-- End of Header-menu -->
</nav>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 d-none d-sm-block">
<!-- Client area -->
<ul class="client-area text-right list-inline m-0" data-animate="fadeInUp" data-delay="1.1">
<li class="dropdown">
<a href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">My Account <i class="fas fa-caret-down"></i></a>
<ul class="dropdown-menu dropdown-menu-right client-links " aria-labelledby="dropdownMenuLink">
<li><a href="#">Sign In</a></li>
<li><a href="#">Sign Up</a></li>
</ul>
</li>
<li><a class="btn btn-secondary" href="http://www.cqetom.live//">Try It Free</a></li>
</ul>
</div>
</div>
</div>
</div>
</header>
<!-- End of Main header -->
<!-- Banner -->
<section class="position-relative bg-light pt-4 pb-4">
<div id="particles_js"></div>
<div class="container">
<div class="row align-items-center">
<div class="col-lg-6">
<!-- Banner content -->
<div class="banner-content">
<h1 data-animate="fadeInUp" data-delay="1.2">World’s Best VPN Service Provider In 2018</h1>
<h2 data-animate="fadeInUp" data-delay="1.3"><span class="typed"></span></h2>
<ul class="list-inline" data-animate="fadeInUp" data-delay="1.4">
<li><a href="#" class="btn btn-primary">Learn More</a></li>
<li><a href="#" class="btn">Check Offer’s <i class="fas fa-caret-right"></i></a></li>
</ul>
</div>
</div>
<div class="col-lg-6 d-none d-lg-block">
<!-- Banner image -->
<div class="banner-image">
<img src="img/slide.png" alt="" data-animate="fadeInUp" data-delay="1.5" data-depth="0.2">
</div>
</div>
</div>
</div>
</section>
<!-- End of Banner -->
<!-- Features -->
<section class="pt-7 pb-5-5">
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="single-feature text-center" data-animate="fadeInUp" data-delay=".1">
<img src="img/icons/vpn.svg" alt="" alt="" data-no-retina class="svg">>
<h3>Fast VPN Without Third Parties</h3>
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum.</p>
</div>
</div>
<div class="col-md-4">
<div class="single-feature text-center" data-animate="fadeInUp" data-delay=".3">
<img src="img/icons/support.svg" alt="" alt="" data-no-retina class="svg">>
<h3>24/7/365 Technical Support</h3>
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum.</p>
</div>
</div>
<div class="col-md-4">
<div class="single-feature text-center" data-animate="fadeInUp" data-delay=".5">
<img src="img/icons/guarantee.svg" alt="" alt="" data-no-retina class="svg">>
<h3>30 Days Money Back Guarantee</h3>
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum.</p>
</div>
</div>
</div>
</div>
</section>
<!-- End of Features -->
<!-- Our services -->
<section>
<div class="services-title position-relative pt-7" data-bg-img="img/buildings.jpg">
<div class="container">
<div class="row justify-content-center">
<div class="col-xl-6 col-lg-8">
<!-- Section title -->
<div class="section-title text-center">
<h2 class="text-white" data-animate="fadeInUp" data-delay=".1">Why You Need Our Service </h2>
<p class="text-white" data-animate="fadeInUp" data-delay=".3">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour</p>
</div>
</div>
</div>
</div>
</div>
<div class="services-wrap bg-white position-relative pt-5 pb-5">
<div class="container">
<!-- All services -->
<div class="row">
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="single-service" data-animate="fadeInUp" data-delay=".05">
<img src="img/icons/security.svg" alt="" alt="" data-no-retina class="svg">>
<h4>Ensure Privacy & Security</h4>
<span>At vero eos et accusamus et iusto odioissimos bland very voluptatum.</span>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="single-service" data-animate="fadeInUp" data-delay=".1">
<img src="img/icons/speed.svg" alt="" alt="" data-no-retina class="svg">>
<h4>Streaming Access & Speed</h4>
<span>At vero eos et accusamus et iusto odioissimos bland very voluptatum.</span>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="single-service" data-animate="fadeInUp" data-delay=".15">
<img src="img/icons/device.svg" alt="" alt="" data-no-retina class="svg">>
<h4>VPN For All Devices</h4>
<span>At vero eos et accusamus et iusto odioissimos bland very voluptatum.</span>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="single-service" data-animate="fadeInUp" data-delay=".2">
<img src="img/icons/internet.svg" alt="" alt="" data-no-retina class="svg">>
<h4>Fully Encrypted Internet</h4>
<span>At vero eos et accusamus et iusto odioissimos bland very voluptatum.</span>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="single-service" data-animate="fadeInUp" data-delay=".25">
<img src="img/icons/network.svg" alt="" alt="" data-no-retina class="svg">>
<h4>Multiple VPN Network</h4>
<span>At vero eos et accusamus et iusto odioissimos bland very voluptatum.</span>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="single-service" data-animate="fadeInUp" data-delay=".3">
<img src="img/icons/virus.svg" alt="" alt="" data-no-retina class="svg">>
<h4>Block Malicious Content</h4>
<span>At vero eos et accusamus et iusto odioissimos bland very voluptatum.</span>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="single-service" data-animate="fadeInUp" data-delay=".35">
<img src="img/icons/bandwidth.svg" alt="" alt="" data-no-retina class="svg">>
<h4>Unlimited Bandwidth</h4>
<span>At vero eos et accusamus et iusto odioissimos bland very voluptatum.</span>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="single-service" data-animate="fadeInUp" data-delay=".4">
<img src="img/icons/trial.svg" alt="" alt="" data-no-retina class="svg">>
<h4>7 Days Free Trial</h4>
<span>At vero eos et accusamus et iusto odioissimos bland very voluptatum.</span>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="single-service" data-animate="fadeInUp" data-delay=".45">
<img src="img/icons/website.svg" alt="" alt="" data-no-retina class="svg">>
<h4>Access Restricted Websites</h4>
<span>At vero eos et accusamus et iusto odioissimos bland very voluptatum.</span>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="single-service" data-animate="fadeInUp" data-delay=".5">
<img src="img/icons/settings.svg" alt="" alt="" data-no-retina class="svg">>
<h4>User Frendly Settings</h4>
<span>At vero eos et accusamus et iusto odioissimos bland very voluptatum.</span>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="single-service" data-animate="fadeInUp" data-delay=".55">
<img src="img/icons/team.svg" alt="" alt="" data-no-retina class="svg">>
<h4>Expert Support Team</h4>
<span>At vero eos et accusamus et iusto odioissimos bland very voluptatum.</span>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="single-service" data-animate="fadeInUp" data-delay=".6">
<img src="img/icons/money.svg" alt="" alt="" data-no-retina class="svg">>
<h4>Money Back Guarantee</h4>
<span>At vero eos et accusamus et iusto odioissimos bland very voluptatum.</span>
</div>
</div>
</div>
<!-- Service contact info -->
<div class="roboto text-center font-weight-medium" data-animate="fadeInUp" data-delay=".65">
<p>If you have any questions in your mind, Just <a href="contact.html">click here</a> to write or you can <br>Call to <a href="tel:1234567890">(+1) 234-567-890</a></p>
</div>
</div>
</div>
</section>
<!-- End of Our services -->
<!-- Pricing plans -->
<section class="pricing-plans pt-7 pb-7">
<div class="container">
<div class="row">
<div class="col-lg-5">
<!-- Section title -->
<div class="section-title">
<h2 data-animate="fadeInUp" data-delay=".1">Choose Your Pricing Plan</h2>
<p data-animate="fadeInUp" data-delay=".3">There are many variations of passages of Lorem Ipsum available, but the majority have suffered by injected humour</p>
</div>
</div>
</div>
<div class="row align-items-center">
<div class="col-lg-5">
<!-- Features list -->
<div class="pricing-features">
<h3 class="cabin" data-animate="fadeInUp" data-delay=".5">The features included with this pricing plan. let’s see what features will you getting.</h3>
<ul class="list-unstyled list-item clearfix">
<li data-animate="fadeInUp" data-delay=".1"><i class="fas fa-check-circle"></i>No logs policy</li>
<li data-animate="fadeInUp" data-delay=".15"><i class="fas fa-check-circle"></i>P2P allowed</li>
<li data-animate="fadeInUp" data-delay=".2"><i class="fas fa-check-circle"></i>Onion Over VPN</li>
<li data-animate="fadeInUp" data-delay=".25"><i class="fas fa-check-circle"></i>Amazing Blazing speeds</li>
<li data-animate="fadeInUp" data-delay=".3"><i class="fas fa-check-circle"></i>Easy To use</li>
<li data-animate="fadeInUp" data-delay=".35"><i class="fas fa-check-circle"></i>Paypal & Bitcoin accepted</li>
<li data-animate="fadeInUp" data-delay=".4"><i class="fas fa-check-circle"></i>Global network</li>
<li data-animate="fadeInUp" data-delay=".45"><i class="fas fa-check-circle"></i>Cancel anytime anywhere</li>
<li data-animate="fadeInUp" data-delay=".5"><i class="fas fa-check-circle"></i>Friendly customer support</li>
<li data-animate="fadeInUp" data-delay=".55"><i class="fas fa-check-circle"></i>Kill Switch available</li>
<li data-animate="fadeInUp" data-delay=".6"><i class="fas fa-check-circle"></i>Unlimited bandwidth</li>
<li data-animate="fadeInUp" data-delay=".65"><i class="fas fa-check-circle"></i>Double encryption</li>
</ul>
<a href="#" class="btn" data-animate="fadeInUp" data-delay=".7">View Payment Method <i class="fas fa-caret-right"></i></a>
</div>
</div>
<div class="col-lg-7">
<!-- Pricing slider -->
<div class="pricing-slides text-center">
<div class="swiper-container pricing-slider">
<div class="swiper-wrapper">
<div class="swiper-slide single-pricing-slide">
<div class="single-pricing-plan">
<img src="img/icons/startup.svg" alt="" alt="" data-no-retina class="svg">>
<h4>Startup</h4>
<span class="time roboto">One Month Plan</span>
<strong class="roboto">$8.99 <sub>/M</sub></strong>
<p>Billed <span>$8.99</span> Per Moth <br>30 Days Money Back Guarantee</p>
<a href="#" class="btn btn-primary">Get This Plan</a>
</div>
</div>
<div class="swiper-slide single-pricing-slide">
<div class="single-pricing-plan">
<img src="img/icons/enterprise.svg" alt="" alt="" data-no-retina class="svg">>
<h4>Enterprise</h4>
<span class="time roboto">Two Years Plan</span>
<strong class="roboto">$4.75 <sub>/M</sub></strong>
<p>Billed <span>$114</span> Per Moth <br>30 Days Money Back Guarantee</p>
<a href="#" class="btn btn-primary">Get This Plan</a>
</div>
</div>
<div class="swiper-slide single-pricing-slide">
<div class="single-pricing-plan">
<img src="img/icons/bandwidth.svg" alt="" alt="" data-no-retina class="svg">>
<h4>Standard</h4>
<span class="time roboto">One Year Plan</span>
<strong class="roboto">$6.49 <sub>/M</sub></strong>
<p>Billed <span>$77.88</span> Per Moth <br>30 Days Money Back Guarantee</p>
<a href="#" class="btn btn-primary">Get This Plan</a>
</div>
</div>
</div>
</div>
<div class="swiper-pagination pricing-pagination position-static"></div>
</div>
<!-- End of Pricing slider -->
</div>
</div>
</div>
</section>
<!-- End of Pricing plans -->
<!-- Reviews -->
<section class="pt-7 pb-7 bg-light">
<div class="container">
<div class="section-title text-center">
<h2 data-animate="fadeInUp" data-delay=".1">What client’s say about us</h2>
</div>
<div class="swiper-container review-slider">
<div class="swiper-wrapper">
<div class="swiper-slide single-review-slide">
<h4>Marsha C. Meyer
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</h4>
<span>Melbourne, Australia</span>
<p>I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give complete account of the system, and expound the actual teachings of happiness. No one rejects, dislikes, or avoids.</p>
</div>
<div class="swiper-slide single-review-slide">
<h4>Bns H. Jabed
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</h4>
<span>Noakhali, Bangladesh</span>
<p>I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give complete account of the system, and expound the actual teachings of happiness. No one rejects, dislikes, or avoids.</p>
</div>
<div class="swiper-slide single-review-slide">
<h4>Cathy S. Knight
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</h4>
<span>California, United States</span>
<p>I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give complete account of the system, and expound the actual teachings of happiness. No one rejects, dislikes, or avoids.</p>
</div>
<div class="swiper-slide single-review-slide">
<h4>Cathy S. Knight
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</h4>
<span>California, United States</span>
<p>I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give complete account of the system, and expound the actual teachings of happiness. No one rejects, dislikes, or avoids.</p>
</div>
<div class="swiper-slide single-review-slide">
<h4>Cathy S. Knight
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</h4>
<span>California, United States</span>
<p>I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give complete account of the system, and expound the actual teachings of happiness. No one rejects, dislikes, or avoids.</p>
</div>
</div>
</div>
<div class="swiper-pagination review-pagination position-static"></div>
</div>
</section>
<!-- End of Reviews -->
<!-- Mobile app -->
<section class="pt-7 pb-7">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-6 col-md-4 d-none d-md-block">
<div class="text-center" data-animate="fadeInUp" data-delay=".1">
<img src="img/mobile.png" alt="">
</div>
</div>
<div class="col-lg-6 col-md-8">
<div class="app-info">
<h2 data-animate="fadeInUp" data-delay=".1">Download Your Application</h2>
<p data-animate="fadeInUp" data-delay=".3">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem</p>
<ul class="apps-list list-inline">
<li data-animate="fadeInUp" data-delay=".5"><a href="#"><img src="img/play-store.png" alt=""></a></li>
<li data-animate="fadeInUp" data-delay=".6"><a href="#"><img src="img/app-store.png" alt=""></a></li>
</ul>
</div>
</div>
</div>
</div>
</section>
<!-- End of Mobile app -->
<!-- Servers -->
<section class="servers pt-7 bg-light">
<div class="container">
<div class="row">
<div class="col-xl-4 col-lg-5">
<div class="section-title">
<h2 data-animate="fadeInUp" data-delay=".1">865 Server In 197 Country</h2>
<p data-animate="fadeInUp" data-delay=".2">There are many variations of passages of Lorem Ipsum ailable, but the majority have suffered hmour</p>
</div>
<ul class="data-centers list-unstyled list-item clearfix">
<li data-animate="fadeInUp" data-delay=".1"><i class="fas fa-caret-right"></i>North America (201)</li>
<li data-animate="fadeInUp" data-delay=".2"><i class="fas fa-caret-right"></i>South America (169)</li>
<li data-animate="fadeInUp" data-delay=".3"><i class="fas fa-caret-right"></i>Europe (151)</li>
<li data-animate="fadeInUp" data-delay=".4"><i class="fas fa-caret-right"></i>Australia/Oceania (142)</li>
<li data-animate="fadeInUp" data-delay=".5"><i class="fas fa-caret-right"></i>Asia (70)</li>
<li data-animate="fadeInUp" data-delay=".6"><i class="fas fa-caret-right"></i>Africa (40)</li>
</ul>
<a href="#" class="btn server-btn" data-animate="fadeInUp" data-delay=".7">View Payment Method <i class="fas fa-caret-right"></i></a>
</div>
<div class="col-xl-8 col-lg-7 d-none d-lg-block">
<div class="server-map">
<img src="img/servers.png" alt="">
</div>
</div>
</div>
</div>
</section>
<!-- End Servers -->
<!-- Our clients -->
<section class="clients-wrap pt-4 pb-4">
<div class="container">
<ul class="our-clients list-unstyled d-md-flex align-items-md-center justify-content-md-between m-0">
<li data-animate="fadeInUp" data-delay=".1">
<a href="#" target="_blank"><img src="img/brands/brand1.png" alt=""></a></li>
<li data-animate="fadeInUp" data-delay=".2">
<a href="#" target="_blank"><img src="img/brands/brand2.png" alt=""></a></li>
<li data-animate="fadeInUp" data-delay=".3">
<a href="#" target="_blank"><img src="img/brands/brand3.png" alt=""></a></li>
<li data-animate="fadeInUp" data-delay=".4">
<a href="#" target="_blank"><img src="img/brands/brand4.png" alt=""></a></li>
<li data-animate="fadeInUp" data-delay=".5">
<a href="#" target="_blank"><img src="img/brands/brand5.png" alt=""></a></li>
<li data-animate="fadeInUp" data-delay=".6">
<a href="#" target="_blank"><img src="img/brands/brand6.png" alt=""></a></li>
<li data-animate="fadeInUp" data-delay=".7">
<a href="#" target="_blank"><img src="img/brands/brand7.png" alt=""></a></li>
<li data-animate="fadeInUp" data-delay=".8">
<a href="#" target="_blank"><img src="img/brands/brand8.png" alt=""></a></li>
<li data-animate="fadeInUp" data-delay=".9">
<a href="#" target="_blank"><img src="img/brands/brand9.png" alt=""></a></li>
</ul>
</div>
</section>
<!-- End of Our clients -->
<!-- Footer -->
<footer class="main-footer bg-primary pt-4">
<div class="container">
<div class="row pb-3">
<!-- Footer info -->
<div class="col-md-4">
<div class="footer-info">
<h3 class="text-white" data-animate="fadeInUp" data-delay="0">About Us</h3>
<p data-animate="fadeInUp" data-delay=".05">We are here to you how all this mistaken idea of denouncing pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful.</p>
<ul class="footer-contacts list-unstyled">
<li data-animate="fadeInUp" data-delay=".1">
<i class="fas fa-phone"></i>
<a href="tel:+9876543210">(+9) 876-543-210</a>,
<a href="tel:+123456789">(+1) 234-567-890</a>
</li>
<li data-animate="fadeInUp" data-delay=".15">
<i class="fas fa-envelope"></i>
<a href="mailto:[email protected]">[email protected]</a>
</li>
<li data-animate="fadeInUp" data-delay=".2">
<i class="fas fa-map-marker-alt"></i>
<span>4749 West Street, Stadium Para, Maijdee Court, Noakhali-3800, Bangladesh</span>
</li>
</ul>
<ul class="social-links list-inline mb-0">
<li data-animate="fadeInUp" data-delay=".25"><a href="#" target="_blank"><i class="fab fa-facebook-f"></i></a></li>
<li data-animate="fadeInUp" data-delay=".3"><a href="#" target="_blank"><i class="fab fa-twitter"></i></a></li>
<li data-animate="fadeInUp" data-delay=".35"><a href="#" target="_blank"><i class="fab fa-google-plus-g"></i></a></li>
<li data-animate="fadeInUp" data-delay=".4"><a href="#" target="_blank"><i class="fab fa-linkedin-in"></i></a></li>
<li data-animate="fadeInUp" data-delay=".45"><a href="#" target="_blank"><i class="fas fa-rss"></i></a></li>
<li data-animate="fadeInUp" data-delay=".5"><a href="#" target="_blank"><i class="fab fa-instagram"></i></a></li>
</ul>
</div>
</div>
<!-- End of Footer info -->
<!-- Footer posts -->
<div class="col-md-4">
<div class="footer-posts">
<h3 class="text-white" data-animate="fadeInUp" data-delay=".5">Latest News/Blogs</h3>
<div class="single-footer-post clearfix" data-animate="fadeInUp" data-delay=".55">
<a href="#" class="float-left">
<img src="img/posts/post-t.png" alt="">
</a>
<span>Posted on <a href="#">Jan 19, 2017</a></span>
<h4 class="cabin font-weight-normal"><a href="#">In major hiring push web hosting</a></h4>
<p>Expand its civil service aviations web hosting powerhouse go daddy.</p>
</div>
<div class="single-footer-post clearfix" data-animate="fadeInUp" data-delay=".6">
<a href="#" class="float-left">
<img src="img/posts/post-t2.png" alt="">
</a>
<span>Posted on <a href="#">Jan 19, 2017</a></span>
<h4 class="cabin font-weight-normal"><a href="#">Lorem ipsum dolor sit consectetur.</a></h4>
<p>Expand its civil service aviations web hosting powerhouse go daddy.</p>
</div>
<a href="blog.html" class="roboto text-uppercase" data-animate="fadeInUp" data-delay=".65">View All Blog Posts <i class="fas fa-caret-right"></i></a>
</div>
</div>
<!-- End of Footer posts -->
<!-- Footer newsletter -->
<div class="col-md-4">
<div class="footer-newsletter">
<h3 class="text-white" data-animate="fadeInUp" data-delay=".65">Newsletter</h3>
<p data-animate="fadeInUp" data-delay=".7">In major hiring push, web hosting powerhouse go daddy to expand its civil service aviations</p>
<form action="https://themelooks.us13.list-manage.com/subscribe/post?u=79f0b132ec25ee223bb41835f&id=f4e0e93d1d" method="post" name="mc-embedded-subscribe-form" target="_blank">
<div class="form-group" data-animate="fadeInUp" data-delay=".75">
<input class="form-control" type="email" name="EMAIL" placeholder="Enter Your E-mail Address" required>
</div>
<div class="subscribe-submit form-group clearfix mb-0" data-animate="fadeInUp" data-delay=".8">
<button class="btn btn-primary btn-square float-left" type="submit">Subscribe</button>
<span>Don’t worry! <br>Your e-mail won’t be published.</span>
</div>
</form>
</div>
</div>
<!-- End of Footer newsletter -->
</div>
<div class="bottom-footer">
<div class="row">
<!-- Copyright -->
<div class="col-md-5 order-last order-md-first">
<p class="copyright" data-animate="fadeInDown" data-delay=".85">© Copyright 2018 <a href="#">VPNet.com</a></p>
</div>
<!-- Footer menu -->
<div class="col-md-7 order-first order-md-last">
<ul class="footer-menu list-inline text-md-right mb-md-0" data-animate="fadeInDown" data-delay=".95">
<li><a href="#">Afilliate</a></li>
<li>|</li>
<li><a href="#">Privacy Policy</a></li>
<li>|</li>
<li><a href="#">Termns & Conditions</a></li>
</ul>
</div>
</div>
</div>
</div>
</footer>
<!-- End of Footer -->
<!-- Back to top -->
<div class="back-to-top">
<a href="#"> <i class="fas fa-arrow-up"></i></a>
</div>
<!-- JS Files -->
