橙色简洁形式pc+wap产品APP展示网页模板代码

橙色简洁形式pc+wap产品APP展示网页模板代码

1. 引入CSS

<link rel="stylesheet" href="vendor/bootstrap/bootstrap.min.css">
<link rel="stylesheet" href="vendor/select2/select2.min.css">
<link rel="stylesheet" href="vendor/owlcarousel/owl.carousel.min.css">
<link rel="stylesheet" href="vendor/lightcase/lightcase.css">
<link href="https://fonts.googleapis.com/css?family=Lato:300,400|Work+Sans:300,400,700" rel="stylesheet">
<link rel="stylesheet" href="css/style.min.css">
<link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">
<link href="https://file.myfontastic.com/7vRKgqrN3iFEnLHuqYhYuL/icons.css" rel="stylesheet">
<link rel="stylesheet" href="vendor/bootstrap/bootstrap.min.css">
<link rel="stylesheet" href="vendor/select2/select2.min.css">
<link rel="stylesheet" href="vendor/owlcarousel/owl.carousel.min.css">
<link rel="stylesheet" href="vendor/lightcase/lightcase.css">
<link href="https://fonts.googleapis.com/css?family=Lato:300,400|Work+Sans:300,400,700" rel="stylesheet">
<link rel="stylesheet" href="css/style.min.css">
<link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">
<link href="https://file.myfontastic.com/7vRKgqrN3iFEnLHuqYhYuL/icons.css" rel="stylesheet">

2. 引入JS

<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script src="vendor/bootstrap/popper.min.js"></script>
<script src="vendor/bootstrap/bootstrap.min.js"></script>
<script src="vendor/select2/select2.min.js "></script>
<script src="vendor/owlcarousel/owl.carousel.min.js"></script>
<script src="vendor/isotope/isotope.min.js"></script>
<script src="vendor/lightcase/lightcase.js"></script>
<script src="vendor/waypoints/waypoint.min.js"></script>
<script src="vendor/countTo/jquery.countTo.js"></script>
<script src="vendor/jQueryValidation/jquery.validate.min.js"></script>
<script src="js/app.min.js "></script>
<script src="//localhost:35729/livereload.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script src="vendor/bootstrap/popper.min.js"></script>
<script src="vendor/bootstrap/bootstrap.min.js"></script>
<script src="vendor/select2/select2.min.js "></script>
<script src="vendor/owlcarousel/owl.carousel.min.js"></script>
<script src="vendor/isotope/isotope.min.js"></script>
<script src="vendor/lightcase/lightcase.js"></script>
<script src="vendor/waypoints/waypoint.min.js"></script>
<script src="vendor/countTo/jquery.countTo.js"></script>
<script src="vendor/jQueryValidation/jquery.validate.min.js"></script>
<script src="js/app.min.js "></script>
<script src="//localhost:35729/livereload.js"></script>

3. HTML代码

<!DOCTYPE html>
<!--
	Moon by GetTemplates.co
	URL: https://gettemplates.co
-->
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Moon - Multipurpose Bootstrap 4 Template by GetTemplates.co</title>
    <meta name="description" content="Core HTML Project">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- External CSS -->
    <link rel="stylesheet" href="vendor/bootstrap/bootstrap.min.css">
    <link rel="stylesheet" href="vendor/select2/select2.min.css">
    <link rel="stylesheet" href="vendor/owlcarousel/owl.carousel.min.css">
    <link rel="stylesheet" href="vendor/lightcase/lightcase.css">
    <!-- Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Lato:300,400|Work+Sans:300,400,700" rel="stylesheet">
    <!-- CSS -->
    <link rel="stylesheet" href="css/style.min.css">
    <link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">
    <link href="https://file.myfontastic.com/7vRKgqrN3iFEnLHuqYhYuL/icons.css" rel="stylesheet">
    <!-- Modernizr JS for IE8 support of HTML5 elements and media queries -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.js"></script>
</head>
<body data-spy="scroll" data-target="#navbar-nav-header" class="static-layout">
	<div class="boxed-page">
		<nav id="gtco-header-navbar" class="navbar navbar-expand-lg py-4">
    <div class="container">
        <a class="navbar-brand d-flex align-items-center" href="/">
            <span class="lnr lnr-moon"></span>
        </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-nav-header" aria-controls="navbar-nav-header" aria-expanded="false" aria-label="Toggle navigation">
            <span class="lnr lnr-menu"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbar-nav-header">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item">
                    <a class="nav-link" href="#home">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#who-we-are">Profile</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#blog">Blog</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#portfolio">Portfolio</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#pricing">Pricing</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="contact.html">Contact</a>
                </li>
            </ul>
        </div>
    </div>
</nav>		<div class="jumbotron d-flex align-items-center" style="background-image: url(img/hero-2.jpg)">
  <div class="container text-center">
    <h1 class="display-2 mb-4">Hello, world!</h1>
    <p>
      Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.<br>Duis mollis, est non commodo luctus.
    </p>
  </div>
</div>		<section id="gtco-who-we-are" class="bg-white">
    <div class="container">
        <div class="section-content">
            <div class="title-wrap">
                <h2 class="section-title">The easiest way <br>to build<b> websites online</b></h2>
                <p class="section-sub-title">Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nulla vitae elit libero, a <br> pharetra augue. Donec id elit non mi porta gravida at eget metus.</p>
            </div>
            <div class="row text-center">
                <div class="col-md-4 col-sm-6 ">
                    <img class="rounded-circle" src="icons/animat-checkmark.gif" alt="Generic placeholder image" width="140" height="140">
                    <h5 class="mb-4">Simple and Clean</h5>
                    <p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                    <p><a class="btn btn-link" href="#" role="button">View details</a></p>
                </div>
                <!-- /.col-md-4 col-sm-6  -->
                <div class="col-md-4 col-sm-6 ">
                    <img class="rounded-circle" src="icons/animat-customize.gif" alt="Generic placeholder image" width="140" height="140">
                    <h5 class="mb-4">Easy to Customize</h5>
                    <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Vestibulum id ligula porta felis.</p>
                    <p><a class="btn btn-link" href="#" role="button">View details</a></p>
                </div>
                <!-- /.col-md-4 col-sm-6  -->
                <div class="col-md-4 col-sm-6 ">
                    <img class="rounded-circle" src="icons/animat-responsive.gif" alt="Generic placeholder image" width="140" height="140">
                    <h5 class="mb-4">Fully Responsive</h5>
                    <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. </p>
                    <p><a class="btn btn-link" href="#" role="button">View details</a></p>
                </div>
                <!-- /.col-md-4 col-sm-6  -->
            </div>
            <!-- /.row -->
        </div>
    </div>
</section>		<!-- Counter Section -->
<section id="gtco-counter" class="overlay bg-fixed">
    <div class="container">
        <div class="section-content">
            <div class="row">
                <!-- Counter Item -->
                <div class="col-md-3 col-sm-6 counter-item">
                    <i class="lnr lnr-users"></i>
                    <span class="number" data-from="0" data-to="34" data-refresh-interval="100">14</span>
                    <h4>Clients</h4>
                </div>
                <!-- End of Counter Item -->
                <!-- Counter Item -->
                <div class="col-md-3 col-sm-6 counter-item">
                    <i class="lnr lnr-briefcase"></i>
                    <span class="number" data-from="0" data-to="32" data-refresh-interval="100">32</span>
                    <h4>Projects</h4>
                </div>
                <!-- End of Counter Item -->
                <!-- Counter Item -->
                <div class="col-md-3 col-sm-6 counter-item">
                    <i class="lnr lnr-heart"></i>
                    <span class="number" data-from="0" data-to="38" data-refresh-interval="100">38</span>
                    <h4>Positive Feedbacks</h4>
                </div>
                <!-- End of Counter Item -->
                <!-- Counter Item -->
                <div class="col-md-3 col-sm-6 counter-item">
                    <i class="lnr lnr-rocket"></i>
                    <span class="number" data-from="0" data-to="29" data-refresh-interval="100">29</span>
                    <h4>Website Launch</h4>
                </div>
                <!-- End of Counter Item -->
            </div>
        </div>
    </div>
</section>
<!-- End of Counter Section -->		<!-- Features Section-->
<section id="gtco-features" class="bg-white">
    <div class="container">
        <div class="section-content">
            <!-- Section Title -->
            <div class="title-wrap">
                <h2 class="section-title">
                    All the  <span>need </span>that you <span>want</span>
                </h2>
                <p class="section-sub-title">Praesent commodo cursus magna, vel scelerisque nisl consectetur et. <br> pharetra augue. Donec id elit non mi.</p>
            </div>
            <!-- End of Section Title -->
            <div class="row">
                <!-- Features Holder-->
                <div class="col-md-12 features-holder">
                    <div class="row">
                        <!-- Features Item -->
                        <div class="col-md-4 col-sm-6 feature-item item mb-3 mb-3 text-center">
                            <div class="my-4">
                                <i class="lnr lnr-cog fs-40"></i>
                            </div>
                            <h4>Easy to Customize</h4>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.</p>
                        </div>
                        <!-- End of Feature Item -->
                        <!-- Features Item -->
                        <div class="col-md-4 col-sm-6 feature-item item mb-3 text-center">
                            <div class="my-4">
                                <i class="lnr lnr-frame-contract fs-40"></i>
                            </div>
                            <h4>Pixel Perfect</h4>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.</p>
                        </div>
                        <!-- End of Feature Item -->
                        <!-- Features Item -->
                        <div class="col-md-4 col-sm-6 feature-item item mb-3 text-center">
                            <div class="my-4">
                                <i class="lnr lnr-bubble fs-40"></i>
                            </div>
                            <h4>Full Support</h4>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.</p>
                        </div>
                        <!-- End of Feature Item -->
                        <!-- Features Item -->
                        <div class="col-md-4 col-sm-6 feature-item item mb-3 text-center">
                            <div class="my-4">
                                <i class="lnr lnr-magic-wand fs-40"></i>
                            </div>
                            <h4>Clean Design</h4>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.</p>
                        </div>
                        <!-- End of Feature Item -->
                        <!-- Features Item -->
                        <div class="col-md-4 col-sm-6 feature-item item mb-3 text-center">
                            <div class="my-4">
                                <i class="lnr lnr-clock fs-40"></i>
                            </div>
                            <h4>Ontime Project</h4>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.</p>
                        </div>
                        <!-- End of Feature Item -->
                        <!-- Features Item -->
                        <div class="col-md-4 col-sm-6 feature-item item mb-3 text-center">
                            <div class="my-4">
                                <i class="lnr lnr-thumbs-up fs-40"></i>
                            </div>
                            <h4>Built with SASS</h4>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.</p>
                        </div>
                        <!-- End of Feature Item -->
                    </div>
                </div>
                <!-- End of Features Holder-->
            </div>
        </div>
    </div>
</section>
<!-- End of Features Section-->		<section id="gtco-section-featurettes" class="featurettes bg-white">
    <div class="container">
        <div class="section-content">
            <div class="row">
                <div class="col-md-12 text-center">
                    <!-- Section Title -->
                    <div class="title-wrap">
                        <h2 class="section-title">
                            <b>Brand new</b> social media,<br> different than any other one
                        </h2>
                        <p class="section-sub-title">
                            Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nulla vitae elit libero, a <br>pharetra augue. Donec id elit non mi porta gravida at eget metus.
                        </p>
                    </div>
                    <!-- End of Section Title -->
                    <div class="featurettes-wrap text-left mb-4">
                        <div class="row featurettes-item">
                            <div class="col-md-4 offset-md-2 col-sm-6">
                                <div class="my-5">
                                    <span class="lnr lnr-camera fs-40 color-primary"></span>
                                </div>
                                <h4 class="mb-4">Capture every moments and share it to all your friends</h4>
                                <p>Nulla vitae elit libero, a pharetra augue. Maecenas sed diam eget risus varius blandit sit amet non magna. Cras mattis consectetur purus sit amet.</p>
                            </div><!--/ .col-md-4.col-md-offset-2.col-sm-6 -->
                            <div class="col-md-4 offset-md-right-2 col-sm-6">
                                <img class="my-5" src="img/app-profile-mockup.png" alt="">
                            </div><!--/ .col-md-4.col-md-offset-right-2.col-sm-6 -->
                        </div><!--/ .featurettes-item -->
                    </div><!--/ .featurettes-wrap -->
                    <div class="featurettes-wrap text-left">
                        <div class="row featurettes-item">
                            <div class="col-md-4 offset-md-2 col-sm-6">
                                <img class="my-4" src="img/app-chat-mockup.png" alt="">
                            </div><!--/ .col-md-4.col-md-offset-2.col-sm-6 -->
                            <div class="col-md-4 offset-md-right-2 col-sm-6 mb-5">
                                <div class="my-4">
                                    <span class="lnr lnr-bubble fs-40 color-primary"></span>
                                </div>
                                <h4 class="mb-4">Send private messages to your friend or make a chat group</h4>
                                <p>Nulla vitae elit libero, a pharetra augue. Maecenas sed diam eget risus varius blandit sit amet non magna. Cras mattis consectetur purus sit amet.</p>
                            </div><!--/ .col-md-4.col-md-offset-right-2.col-sm-6 -->
                        </div><!--/ .featurettes-item -->
                    </div><!--/ .featurettes-wrap -->
                    <div class="featurettes-wrap text-left">
                        <div class="row featurettes-item">
                            <div class="col-md-4 offset-md-2 col-sm-6 offset-sm-0">
                                <h4 class="mb-4">Ready to join our App for your advance social experience?</h4>
                                <p>Nulla vitae elit libero, a pharetra augue. Maecenas sed diam eget risus varius blandit sit amet non magna. Cras mattis consectetur purus sit amet.</p>
                            </div><!--/ .col-md-4.col-md-offset-2.col-sm-6 -->
                            <div class="col-md-4 offset-md-right-2 col-sm-6 text-center">
                                <a href="#0"><img class="btn-img my-4" src="img/appstore-btn.png" alt=""></a>
                                <a href="#0"><img class="btn-img" src="img/playstore-btn.png" alt=""></a>
                            </div><!--/ .col-md-4.col-md-offset-right-2.col-sm-6 -->
                        </div><!--/ .featurettes-item -->
                    </div><!--/ .featurettes-wrap -->
                </div><!--/ .col-md-12 -->
            </div><!--/ .row -->
        </div>
    </div><!--/ .container -->
</section>		<!-- Blog Section -->
<section id="gtco-blog" class="bg-grey">
    <div class="container">
        <div class="section-content">
            <div class="title-wrap mb-5">
                <h2 class="section-title">Latest <b>news</b></h2>
                <p class="section-sub-title">Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
            </div>
            <div class="row">
                <!-- Blog -->
                <div class="col-md-12 blog-holder">
                    <div class="row">
                        <!-- Blog Item -->
                        <div class="col-md-4 blog-item-wrapper">
                            <div class="blog-item">
                                <div class="blog-img">
                                    <a href="single.html"><img src="img/blog-1.jpg" alt=""></a>
                                </div>
                                <div class="blog-text">
                                    <div class="blog-tag">
                                        <a href="#"><h6><small>CODE</small></h6></a>
                                    </div>
                                    <div class="blog-title">
                                        <a href="single.html"><h4>Amazing Blog Title</h4></a>
                                    </div>
                                    <div class="blog-meta">
                                        <p class="blog-date">30 May 2016</p> /
                                        <p class="blog-comment"><a href="">23 Comments</a></p>
                                    </div>
                                    <div class="blog-desc">
                                        <p>Lorem ipsum dolor sit amet con sectetur adipiscing elit sed do eiu smod tempor incididunt ut labore et dolore magna aliqua.</p>
                                    </div>
                                    <div class="blog-author">
                                        <p>by John Doe</p>
                                    </div>
                                    <div class="blog-share-wrapper">
                                        <a href="https://www.51qianduan.com/">51前端</a>
                                        <a href="https://www.51qianduan.com/">51前端</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- End of Blog Item -->
                        <!-- Blog Item -->
                        <div class="col-md-4 blog-item-wrapper">
                            <div class="blog-item">
                                <div class="blog-img">
                                    <a href="#"><img src="img/blog-2.jpg" alt=""></a>
                                </div>
                                <div class="blog-text">
                                    <div class="blog-tag">
                                        <a href="#"><h6><small>SPORTS</small></h6></a>
                                    </div>
                                    <div class="blog-title">
                                        <a href="#"><h4>Amazing Blog Title</h4></a>
                                    </div>
                                    <div class="blog-meta">
                                        <p class="blog-date">30 May 2016</p> /
                                        <p class="blog-comment"><a href="">23 Comments</a></p>
                                    </div>
                                    <div class="blog-desc">
                                        <p>Lorem ipsum dolor sit amet con sectetur adipiscing elit sed do eiu smod tempor incididunt ut labore et dolore magna aliqua.</p>
                                    </div>
                                    <div class="blog-author">
                                        <p>by John Doe</p>
                                    </div>
                                    <div class="blog-share-wrapper">
                                        <a href="https://www.51qianduan.com/">51前端</a>
                                        <a href="https://www.51qianduan.com/">51前端</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- End of Blog Item -->
                        <!-- Blog Item -->
                        <div class="col-md-4 blog-item-wrapper">
                            <div class="blog-item">
                                <div class="blog-img">
                                    <a href="#"><img src="img/blog-3.jpg" alt=""></a>
                                </div>
                                <div class="blog-text">
                                    <div class="blog-tag">
                                        <a href="#"><h6><small>ECONOMY</small></h6></a>
                                    </div>
                                    <div class="blog-title">
                                        <a href="#"><h4>Amazing Blog Title</h4></a>
                                    </div>
                                    <div class="blog-meta">
                                        <p class="blog-date">30 May 2016</p> /
                                        <p class="blog-comment"><a href="">23 Comments</a></p>
                                    </div>
                                    <div class="blog-desc">
                                        <p>Lorem ipsum dolor sit amet con sectetur adipiscing elit sed do eiu smod tempor incididunt ut labore et dolore magna aliqua.</p>
                                    </div>
                                    <div class="blog-author">
                                        <p>by John Doe</p>
                                    </div>
                                    <div class="blog-share-wrapper">
                                        <a href="https://www.51qianduan.com/">51前端</a>
                                        <a href="https://www.51qianduan.com/">51前端</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- End of Blog Item -->
                    </div>
                </div>
                <!-- End of Blog -->
            </div>
        </div>
    </div>
</section>
<!-- End of Blog Section -->		<!-- Portfolio Section -->
<section id="gtco-portfolio" class="bg-white">
    <div class="container">
        <div class="section-content">
            <!-- Section Title -->
            <div class="title-wrap">
                <h2 class="section-title">Our <b>Awesome</b> Works</h2>
                <p class="section-sub-title">Praesent commodo cursus magna, vel scelerisque nisl consectetur et. <br> pharetra augue. Donec id elit non mi.</p>
            </div>
            <!-- End of Section Title -->
            <div class="row">
                <!-- Portfolio Holder -->
                <div class="col-md-12 portfolio-holder">
                    <!-- Btn Filter -->
                    <div class="filter-button-group btn-filter d-flex justify-content-center">
                        <a tabindex="0" class="is-checked" data-filter="*">Show All</a>
                        <a tabindex="0" data-filter=".minimalism">Minimalism</a>
                        <a tabindex="0" data-filter=".vintage">Vintage</a>
                        <a tabindex="0" data-filter=".creative">Creative</a>
                    </div>
                    <!-- End of Btn Filter -->
                    <!-- Portfolio Content -->
                    <div class="grid-portfolio">
                        <div class="grid-sizer"></div>
                        <div class="gutter-sizer"></div>
                        <!-- Portfolio Item -->
                        <div class="grid-item minimalism">
                            <div class="grid-item-wrapper">
                                <img src="img/photo-1.jpg" alt="portfolio-img" class="portfolio-item">
                                <div class="grid-info">
                                    <div class="grid-link d-flex justify-content-center">
                                        <a href="https://www.51qianduan.com/">51前端</a>
                                        <a href="https://www.51qianduan.com/">51前端</a>
                                    </div>
                                    <div class="grid-title">
                                        <h4>Camera</h4>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- End of Portfolio Item -->
                        <!-- Portfolio Item -->
                        <div class="grid-item vintage">
                            <div class="grid-item-wrapper">
                                <img src="img/photo-6.jpg" alt="portfolio-img" class="portfolio-item">
                                <div class="grid-info">
                                    <div class="grid-link d-flex justify-content-center">
                                        <a href="https://www.51qianduan.com/">51前端</a>
                                        <a href="https://www.51qianduan.com/">51前端</a>
                                    </div>
                                    <div class="grid-title">
                                        <h4>Flower</h4>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- End of Portfolio Item -->
                        <!-- Portfolio Item -->
                        <div class="grid-item creative grid-item-height">
                            <div class="grid-item-wrapper">
                                <img src="img/photo-2.jpg" alt="portfolio-img" class="portfolio-item">
                                <div class="grid-info">
                                    <div class="grid-link d-flex justify-content-center">
                                        <a href="https://www.51qianduan.com/">51前端</a>
                                        <a href="https://www.51qianduan.com/">51前端</a>
                                    </div>
                                    <div class="grid-title">
                                        <h4>Breakfast</h4>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- End of Portfolio Item -->
                        <!-- Portfolio Item -->
                        <div class="grid-item creative">
                            <div class="grid-item-wrapper">
                                <img src="img/photo-7.jpg" alt="portfolio-img" class="portfolio-item">
                                <div class="grid-info">
                                    <div class="grid-link d-flex justify-content-center">
                                        <a href="https://www.51qianduan.com/">51前端</a>
                                        <a href="https://www.51qianduan.com/">51前端</a>
                                    </div>
                                    <div class="grid-title">
                                        <h4>Chair</h4>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- End of Portfolio Item -->
                        <!-- Portfolio Item -->
                        <!-- <div class="grid-item minimalism">
                            <div class="grid-item-wrapper">
                                <img src="img/photo-3.jpg" alt="portfolio-img" class="portfolio-item">
                                <div class="grid-info">
                                    <div class="grid-link d-flex justify-content-center">
                                        <a href="https://www.51qianduan.com/">51前端</a>
                                        <a href="https://www.51qianduan.com/">51前端</a>
                                    </div>
                                    <div class="grid-title">
                                        <h4>Clock</h4>
                                    </div>
                                </div>
                            </div>
                        </div> -->
                        <!-- End of Portfolio Item -->
                        <!-- Portfolio Item -->
                        <div class="grid-item vintage">
                            <div class="grid-item-wrapper">
                                <img src="img/photo-4.jpg" alt="portfolio-img" class="portfolio-item">
                                <div class="grid-info">
                                    <div class="grid-link d-flex justify-content-center">
                                        <a href="https://www.51qianduan.com/">51前端</a>
                                        <a href="https://www.51qianduan.com/">51前端</a>
                                    </div>
                                    <div class="grid-title">
                                        <h4>Hidden Book</h4>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- End of Portfolio Item -->
                        <!-- Portfolio Item -->
                        <div class="grid-item creative">
                            <div class="grid-item-wrapper">
                                <img src="img/photo-9.jpg" alt="portfolio-img" class="portfolio-item">
                                <div class="grid-info">
                                    <div class="grid-link d-flex justify-content-center">
                                        <a href="https://www.51qianduan.com/">51前端</a>
                                        <a href="https://www.51qianduan.com/">51前端</a>
                                    </div>
                                    <div class="grid-title">
                                        <h4>Red</h4>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- End of Portfolio Item -->
                    </div>
                    <!-- End of Portfolio Content -->
                </div>
                <!-- End of Portfolio Holder -->
            </div>
        </div>
    </div>
</section>
<!-- End of Portfolio Section -->		<section id="gtco-pricing" class="bg-grey">
    <div class="container">
        <div class="section-content">
             <!-- Section Title -->
            <div class="title-wrap">
                <h2 class="section-title">Pricing</h2>
                <p class="section-sub-title">Praesent commodo cursus magna, vel scelerisque nisl consectetur et. <br> pharetra augue. Donec id elit non mi.</p>
            </div>
            <!-- End of Section Title -->
            <div class="card-deck mb-3 text-center">
                <div class="price-box card mb-4 box-shadow">
                    <div class="card-header p-4">
                        <h6 class="mb-0 text-orange font-weight-bold">BASIC</h6>
                        <h2 class="display-4 p-2 mb-0 font-weight-bold">50<small class="align-top">GB</small></h2>
                        <p class="mb-0">Perfect for the beginning</p>
                    </div>
                    <div class="card-body p-4">
                        <ul class="price-box-list list-unstyled mt-3 mb-4">
                            <li>Unlimited Traffic</li>
                            <li>Full Platform Applications</li>
                            <li>Email support</li>
                        </ul>
                        <h2 class="card-title pricing-card-title mb-0 font-weight-bold">$0,99</h2>
                        <p>/month</p>
                        <a href="https://www.51qianduan.com/">51前端</a>
                    </div>
                </div>
                <div class="price-box card mb-4 box-shadow">
                    <div class="card-header p-4">
                        <h6 class="mb-0 text-cyan font-weight-bold">PRO</h6>
                        <h2 class="display-4 p-2 mb-0 font-weight-bold">250<small class="align-top">GB</small></h2>
                        <p class="mb-0">For Professionals</p>
                    </div>
                    <div class="card-body p-4">
                        <ul class="price-box-list list-unstyled mt-3 mb-4">
                            <li>1 Domain Free</li>
                            <li>Unlimited Traffic</li>
                            <li>Full Platform Applications</li>
                            <li>Premium support</li>
                        </ul>
                        <h2 class="card-title pricing-card-title mb-0 font-weight-bold">$4,99</h2>
                        <p>/month</p>
                        <a href="https://www.51qianduan.com/">51前端</a>
                    </div>
                </div>
                <div class="price-box card mb-4 box-shadow">
                    <div class="card-header p-4">
                        <h6 class="mb-0 text-red font-weight-bold">PERFORMANCE</h6>
                        <h2 class="display-4 p-2 mb-0 font-weight-bold">500<small class="align-top">GB</small></h2>
                        <p class="mb-0">For Business</p>
                    </div>
                    <div class="card-body p-4">
                        <ul class="price-box-list list-unstyled mt-3 mb-4">
                            <li>1 Domain Free</li>
                            <li>Unlimited Traffic</li>
                            <li>Full Platform Applications</li>
                            <li>SSL Certificate</li>
                            <li>Premium support</li>
                        </ul>
                        <h2 class="card-title pricing-card-title mb-0 font-weight-bold">$9,99</h2>
                        <p>/month</p>
                        <a href="https://www.51qianduan.com/">51前端</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- /END PRICING -->
</section>		<!-- Client Section -->
<section id="gtco-client" class="bg-white">
    <div class="container">
        <div class="section-content">
            <!-- Section Title -->
            <div class="title-wrap">
                <h2 class="section-title">
                    Who love to <b> work</b> with us
                </h2>
            </div>
            <!-- End of Section Title -->
            <div class="row ">
                <div class="col-md-2">
                    <!-- Client Item -->
                    <div class="client-item">
                        <img class="img-responsive" src="img/client-1.png" alt=" ">
                    </div>
                    <!-- End of Client Item  -->
                </div>
                <div class="col-md-2">
                    <!-- Client Item -->
                    <div class="client-item">
                        <img class="img-responsive" src="img/client-2.png" alt=" ">
                    </div>
                    <!-- End of Client Item -->
                </div>
                <div class="col-md-2">
                    <!-- Client Item  -->
                    <div class="client-item">
                        <img class="img-responsive" src="img/client-3.png" alt=" ">
                    </div>
                    <!-- End of Client Item -->
                </div>
                <div class="col-md-2">
                    <!-- Client Item  -->
                    <div class="client-item">
                        <img class="img-responsive" src="img/client-4.png" alt=" ">
                    </div>
                    <!-- End of Client Item  -->
                </div>
                <div class="col-md-2">
                    <!-- Client Item  -->
                    <div class="client-item">
                        <img class="img-responsive" src="img/client-5.png" alt=" ">
                    </div>
                    <!-- End of Client Item  -->
                </div>
                <div class="col-md-2">
                    <!-- Client Item  -->
                    <div class="client-item">
                        <img class="img-responsive" src="img/client-6.png" alt=" ">
                    </div>
                    <!-- End of Client Item -->
                </div>
            </div>
        </div>
    </div>
</section>
<!-- End of Client Section -->		<footer class="mastfoot mb-3 bg-white py-4 border-top">
    <div class="inner container">
         <div class="row">
         	<div class="col-md-6 d-flex align-items-center justify-content-md-start justify-content-center">
         		<p class="mb-0">&copy; 2019 Moon. All Right Reserved. Design by <a href="https://www.51qianduan.com/">51前端</a>.</p>
         	</div>
            <div class="col-md-6">
            	<nav class="nav nav-mastfoot justify-content-md-end justify-content-center">
	                <a class="nav-link" href="#">
	                	<i class="icon-facebook"></i>
	                </a>
	                <a class="nav-link" href="#">
	                	<i class="icon-twitter"></i>
	                </a>
	                <a class="nav-link" href="#">
	                	<i class="icon-instagram"></i>
	                </a>
	                <a class="nav-link" href="#">
	                	<i class="icon-linkedin"></i>
	                </a>
	                <a class="nav-link" href="#">
	                	<i class="icon-youtube"></i>
	                </a>
	                <a class="nav-link" href="#">
	                	<i class="icon-pinterest"></i>
	                </a>
	            </nav>
            </div>
        </div>
    </div>
</footer>	</div>
</div>
	<!-- External JS -->
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
	<script src="vendor/bootstrap/popper.min.js"></script>
	<script src="vendor/bootstrap/bootstrap.min.js"></script>
	<script src="vendor/select2/select2.min.js "></script>
	<script src="vendor/owlcarousel/owl.carousel.min.js"></script>
	<script src="vendor/isotope/isotope.min.js"></script>
	<script src="vendor/lightcase/lightcase.js"></script>
	<script src="vendor/waypoints/waypoint.min.js"></script>
	<script src="vendor/countTo/jquery.countTo.js"></script>
	<script src="vendor/jQueryValidation/jquery.validate.min.js"></script>
	<!-- Main JS -->
	<script src="js/app.min.js "></script>
	<script src="//localhost:35729/livereload.js"></script>
</body>
</html>

用户评论

18素材网

一个让开发更高效的素材分享平台,用于快速开发强大的Web界面。


官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:864918708
Css3+Html5讨论群
群号:864918708

加群请备注:从官网了解到