码云链接： https://gitee.com/zhangyangguo-er/codes/v6dzh8u0rkxyq72943s1n70
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <title>主页 </title> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 7 <meta name="description" content=""> 8 <link href=‘https://fonts.googleapis.com/css?family=Karla:400,400i,700%7CLato:300,400,400i,700‘ rel=‘stylesheet‘> 9 <link rel="stylesheet" href="css/bootstrap.min.css" /> 10 <link rel="stylesheet" href="css/magnific-popup.css" /> 11 <link rel="stylesheet" href="css/font-icons.css" /> 12 <link rel="stylesheet" href="css/sliders.css" /> 13 <link rel="stylesheet" href="css/style.css" /> 14 <link rel="shortcut icon" href="img/favicon.ico"> 15 <link rel="apple-touch-icon" href="img/apple-touch-icon.png"> 16 <link rel="apple-touch-icon" sizes="72x72" href="img/apple-touch-icon-72x72.png"> 17 <link rel="apple-touch-icon" sizes="114x114" href="img/apple-touch-icon-114x114.png"> 18 </he 19 <body> 20 <div class="loader-mask"> 21 <div class="loader"> 22 "Loading..." 23 </div> 24 </div> 25 <main class="main-wrapper"> 26 <header class="nav nav--transparent"> 27 <div class="nav__holder" id="sticky-nav"> 28 <div class="container"> 29 <div class="flex-parent"> 30 <div class="nav__header clearfix"> 31 <div class="logo-wrap"> 32 <a href="index.html" class="logo__link"> 33 <img class="logo logo--dark" src="img/logo_dark.png" alt="logo"> 34 <img class="logo logo--light" src="img/logo_light.png" alt="logo"> 35 </a> 36 </div> 37 <button type="button" class="nav__icon-toggle" id="nav__icon-toggle" data-toggle="collapse" data-target="#navbar-collapse"> 38 <span class="sr-only">Toggle navigation</span> 39 <span class="nav__icon-toggle-bar"></span> 40 <span class="nav__icon-toggle-bar"></span> 41 <span class="nav__icon-toggle-bar"></span> 42 </button> 43 </div> <!-- end nav-header --> 44 <nav id="navbar-collapse" class="nav__wrap collapse navbar-collapse"> 45 <ul class="nav__menu nav__menu--inline"> 46 <li class="nav__dropdown active"> 47 <a href="#">主页</a> 48 <i class="ui-arrow-down nav__dropdown-trigger"></i> 49 </li> 50 <li class="nav__dropdown"> 51 <a href="#">理念</a> 52 <i class="ui-arrow-down nav__dropdown-trigger"></i> 53 <ul class="nav__dropdown-menu"> 54 </ul> 55 </li> 56 <li class="nav__dropdown"> 57 <a href="#">最新信息</a> 58 <i class="ui-arrow-down nav__dropdown-trigger"></i> 59 <ul class="nav__dropdown-menu"> 60 </ul> 61 </li> 62 <li class="nav__dropdown"> 63 <a href="#">相关文件</a> 64 <i class="ui-arrow-down nav__dropdown-trigger"></i> 65 <ul class="nav__dropdown-menu"> 66 </ul> 67 </li> 68 <li class="nav__dropdown"> 69 <a href="#">联系我们</a> 70 <i class="ui-arrow-down nav__dropdown-trigger"></i> 71 <ul class="nav__dropdown-menu"> 72 </ul> 73 </li> <!-- end elements --> 74 </ul> <!-- end menu --> 75 </nav> <!-- end nav-wrap --> 76 </div> <!-- end flex-parent --> 77 </div> <!-- end container --> 78 </div> 79 </header> <!-- end navigation --> 80 <div class="content-wrapper oh"> 81 <section class="hero bg-video" style="background-image: url(img/hero/hero_2.jpg);"> 82 <div class="container-full-height container-full-height--deduct-mobile-nav oh"> 83 <div id="video-container"><video width="100%" src="img/preview.mp4" type="video/mp4" id="player1" poster="" controls="controls" autoplay="autoplay" loop="loop" preload="auto"></video></div> 84 <div class="video-cover"></div> 85 <div class="container hero__container hero__container--tall"> 86 <div class="hero__outer"> 87 <div class="hero__inner hero__inner--bottom"> 88 <a href="https://www.youtube.com/watch?v=M6K-_l8lPNo?autoplay=1" class="play-btn single-video-lightbox mb-30"></a> 89 </div> 90 </div> 91 </div> 92 </div> 93 </section> <!-- end hero --> 94 <section class="section-wrap promo-section"> 95 <div class="container"> 96 <div class="row"> 97 <div class="col-md-6 col-sm-12"> 98 <img src="img/promo/1.jpg" alt="" class="promo-section__img"> 99 </div> 100 <div class="col-md-4 col-md-offset-1 col-sm-12 animate"> 101 <div class="promo-section__description"> 102 <h3 class="promo-section__title">做一些有意义的事在空余时间</h3> 103 <ul class="promo-section__最新信息"> 104 </ul> 105 </div> 106 </div> 107 </div> 108 </div> 109 </section> <!-- end promo section --> 110 <section class="top-divider"> 111 <div class="container flex-parent flex-xs-column"> 112 <div class="feature feature-1"> 113 <a href="#" class="feature__icon-holder"> 114 <i class="pe-7s-cloud feature__icon feature__icon--gradient"></i> 115 </a> 116 <div class="feature__text"> 117 <h3 class="feature__title bottom-line">苹果下载</h3> 118 <a href="#" class="link-more">点击下载 <i class="ui-arrow-right"></i></a> 119 </div> 120 </div> <!-- end feature item --> 121 <div class="feature feature-1"> 122 <a href="#" class="feature__icon-holder"> 123 <i class="pe-7s-diamond feature__icon feature__icon--gradient"></i> 124 </a> 125 <div class="feature__text"> 126 <h3 class="feature__title bottom-line">安卓下载</h3> 127 <a href="#" class="link-more">点击下载<i class="ui-arrow-right"></i></a> 128 </div> 129 </div> <!-- end feature item --> 130 </div> 131 </section> <!-- end feature --> 132 <section class="section-wrap bg-dark"> 133 <div class="container"> 134 <div id="owl-testimonials" class="owl-carousel owl-theme"> 135 <div class="testimonial clearfix"> 136 <img src="img/testimonials/1.jpg" alt="" class="testimonial__img"> 137 <div class="testimonial__body"> 138 <p class="testimonial__text">Just a note on how wonderful this theme is! If you are thinking of purchasing, I’d say do it! The flexibility is awesome possibilities are endless. I will rate it 5 stars. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore Lorem ipsum dolor sit amet, tetur adipisicing elit.</p> 139 <span class="testimonial__author">Christine Clark</span> 140 <span class="testimonial__company">CEO of DeoThemes</span> 141 </div> 142 </div> 143 <div class="testimonial clearfix"> 144 <img src="img/testimonials/2.jpg" alt="" class="testimonial__img"> 145 <div class="testimonial__body"> 146 <p class="testimonial__text">This theme is the best I ever tried on ThemeForest. I’m so happy and my client as well. Possibilities is just awesome and you can build everything with this perfect theme. I recommend it to everyone. I will rate it 5 stars. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut.</p> 147 <span class="testimonial__author">Mark Zukerberg</span> 148 <span class="testimonial__company">CEO of company</span> 149 </div> 150 </div> 151 <div class="testimonial clearfix"> 152 <img src="img/testimonials/3.jpg" alt="" class="testimonial__img"> 153 <div class="testimonial__body"> 154 <p class="testimonial__text">Needless to say, beautifully designed theme that serves many purpose. Even more sutomers support is the best! Highly recommend this theme to anyone who enjoys a fine product. I will rate it 5 stars. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p> 155 <span class="testimonial__author">Rowena Whilson</span> 156 <span class="testimonial__company">PR Agent</span> 157 </div> 158 </div> 159 </div> 160 </div> 161 </section> <!-- end testimonials --> 162 <section class="section-wrap bg-light"> 163 <div class="container"> 164 <div class="heading-row text-center"> 165 </div> 166 <div class="row"> 167 <div class="col-md-4 col-sm-6"> 168 <div class="pricing-table"> 169 <div class="pricing-table__price-box"> 170 <i class="pe-7s-gift pricing-table__icon"></i> 171 <h3 class="pricing-table__title">个人价格 </h3> 172 <span class="pricing-table__price">19.00</span> 173 </div> 174 <div class="pricing-table__最新信息"> 175 <p> 176 </p> 177 </div> 178 <div class="pricing-table__button"> 179 <a href="#" class="btn btn--md btn--light btn--wide"><span>详情</span></a> 180 </div> 181 </div> 182 </div> <!-- end col --> 183 <div class="col-md-4 col-sm-6"> 184 <div class="pricing-table pricing-table--best"> 185 <span class="pricing-table__ribbon">Best Valued</span> 186 <div class="pricing-table__price-box"> 187 <i class="pe-7s-cup pricing-table__icon"></i> 188 <h3 class="pricing-table__title">商业价格</h3> 189 <span class="pricing-table__price">39.00</span> 190 </div> 191 <div class="pricing-table__最新信息"> 192 <p> 193 </p> 194 </div> 195 <div class="pricing-table__button"> 196 <a href="#" class="btn btn--md btn--gradient btn--wide"><span>详情</span></a> 197 </div> 198 </div> 199 </div> <!-- end col --> 200 <div class="col-md-4 col-sm-6"> 201 <div class="pricing-table"> 202 <span class="pricing-table__term">Per User M 203 <div class="pricing-table__price-box"> 204 <i class="pe-7s-science pricing-table__icon"></i> 205 <h3 class="pricing-table__title">友情价格</h3> 206 <span class="pricing-table__price">59.00</span> 207 </div> 208 <div class="pricing-table__最新信息"> 209 <p> 210 </p> 211 </div> 212 <div class="pricing-table__button"> 213 <a href="#" class="btn btn--md btn--light btn--wide"><span>详情</span></a> 214 </div> 215 </div> 216 </div> <!-- end col --> 217 </div> 218 </div> 219 </section> <!-- end pricing 3 columns --> 220 <footer class="footer bg-dark"> 221 <div class="container"> 222 <div class="footer__widgets"> 223 <div class="row"> 224 <div class="col-md-4 col-sm-3 col-xs-12"> 225 <div class="widget footer__about-us"> 226 <img src="img/logo_light.png" alt="" class="logo"> 227 <p class="mb-20 mt-20">Our Theme is a very slick and clean e-commerce template with endless possibilities. Creating an awesome website with this Theme.</p> 228 <div class="footer__socials"> 229 <div class="social-icons social-icons--nobase"> 230 <a href="#"><i class="ui-twitter"></i></a> 231 <a href="#"><i class="ui-facebook"></i></a> 232 <a href="#"><i class="ui-linkedin"></i></a> 233 <a href="#"><i class="ui-instagram"></i></a> 234 </div> 235 </div> 236 </div> 237 </div> <!-- end about us --> 238 <div class="col-md-2 col-md-offset-2 col-sm-3 col-xs-12"> 239 </div> 240 </div> 241 </div> 242 </div> 243 </div> 244 </div> 245 </div> <!-- end container --> 246 <div class="footer__bottom footer__bottom--top-divider bg-dark"> 247 <div class="container text-center"> 248 </div> 249 </div> <!-- end footer bottom --> 250 </footer> <!-- end footer --> 251 <div id="back-to-top"> 252 <a href="#top"><i class="ui-arrow-up"></i></a> 253 </div> 254 </div> <!-- end content wrapper --> 255 </main> <!-- end main wrapper --> 256 <script type="text/javascript" src="js/jquery.min.js"></script> 257 <script type="text/javascript" src="js/bootstrap.min.js"></script> 258 <script type="text/javascript" src="js/plugins.js"></script> 259 <script type="text/javascript" src="js/scripts.js"></script> 260 </body> 261 </html>
原文：https://www.cnblogs.com/zhangyangguo-er/p/10623793.html