綠色大氣風格的VPN服務器托管企業網站源碼下載



30 118 40



模板描述:綠色大氣風格 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&amp;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">&copy; 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 -->



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 行業 企業 公司 工廠 分類 響應式 自適應 設備 風格 顏色 扁平化 企業 行業 公司 工廠 bootstrap bootstrap自適應 bootstrap響應式 網絡科技 科技公司 網絡科技公司 IT公司 網絡公司 軟件公司 IT軟件公司 pc+wap 移動+電腦 手機+電腦 綠色 簡潔 簡約 簡單
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子 代理赚钱软件 五子棋 河北20选5走势图100期 太仓股票配资 河北省十一选五走势图 包六肖是怎样中几个算中 2013排列三走势图 南昌麻将算子怎么算 香港麻将怎么玩 20选5开奖结果 青海11选5结果 排列三俩码组三遗漏 功夫鸡排赚钱哪 ag让我赢了一个月一天输光 这区双色球彩票中奖号 足彩胜负彩奖金多少