模板描述：白色 简洁风格 响应式 手机App应用。满屏展示效果。鼠标移动在图片区域或者文字区域上有放大效果和展开效果。适用手机App应用等行业。同时兼容手机端和电脑网页端。
代码结构
1. 引入CSS
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700&subset=latin-ext" rel="stylesheet"> <link rel="stylesheet" type="text/css" href="assets/css/plugins.css"> <link rel="stylesheet" type="text/css" href="assets/css/main.css">
2. 引入JS
<script type="text/javascript" src="assets/js/plugins.js"></script> <script type="text/javascript" src="assets/js/main.js"></script>
3. HTML代码
<!-- PRELOADER --> <div class="preloader"> <!-- SPINNER --> <div class="spinner"> <div class="bounce-1"></div> <div class="bounce-2"></div> <div class="bounce-3"></div> </div> <!-- /SPINNER --> </div> <!-- /PRELOADER --> <!-- HERO --> <div class="hero"> <!-- FRONT CONTENT --> <div class="front-content"> <!-- CONTAINER --> <div class="container-fluid"> <!-- COLUMN --> <div class="col-sm-5 full-height"> <!-- CONTAINER MID --> <div class="container-mid"> <!-- ANIMATION CONTAINER --> <div class="animation-container animation-fade-right" data-animation-delay="0"> <!-- PHONE SLIDER --> <div class="phone-slider owl-carousel"> <img src="assets/img/slides/slide-1.jpg" alt="image"> <img src="assets/img/slides/slide-2.jpg" alt="image"> <img src="assets/img/slides/slide-3.jpg" alt="image"> </div> <!-- /PHONE SLIDER --> </div> <!-- /ANIMATION CONTAINER --> </div> <!-- /CONTAINER MID --> </div> <!-- /COLUMN --> <!-- COLUMN --> <div class="col-sm-7 text-left full-height"> <!-- CONTAINER MID --> <div class="container-mid"> <!-- ANIMATION CONTAINER --> <div class="animation-container animation-fade-down" data-animation-delay="0"> <img class="img-responsive logo" src="assets/img/logo.png" alt="image"> </div> <!-- /ANIMATION CONTAINER --> <!-- ANIMATION CONTAINER --> <div class="animation-container animation-fade-left" data-animation-delay="200"> <p class="subline">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id ullamcorper elit. Morbi et massa dolor. Nam quis sapien porttitor, ultrices neque sit amet, maximus leo. Nullam eget commodo urna, at porttitor ante. Duis pretium dolor lectus, non luctus justo iaculis sed. Nunc quis massa quam. </p> </div> <!-- /ANIMATION CONTAINER --> <!-- ANIMATION CONTAINER --> <div class="animation-container animation-fade-up" data-animation-delay="400"> <div class="download-button"><i class="fa fa-apple" aria-hidden="true"></i>Download</div> <div class="download-button"><i class="fa fa-android" aria-hidden="true"></i>Download</div> </div> <!-- /ANIMATION CONTAINER --> </div> <!-- /CONTAINER MID --> </div> <!-- /COLUMN --> </div> <!-- /CONTAINER --> <!-- FOOTER --> <div class="footer"> <!-- CONTAINER FLUID --> <div class="container-fluid"> <!-- COLUMN --> <div class="col-xs-6 text-left"> <p class="popup-links"><a href="#" data-featherlight="#popup-faq">FAQ</a><a href="#" data-featherlight="#popup-privacy-terms">Privacy Policy & Terms</a></p> </div> <!-- /COLUMN --> <!-- COLUMN --> <div class="col-xs-6 text-right"> <p>Copyright © 2019.Company name All rights reserved.<a target="_blank" href="http://sc.51qianduan.com/moban/">网页模板</a></p> </div> <!-- /COLUMN --> </div> <!-- /CONTAINER FLUID --> </div> <!-- /FOOTER --> </div> <!-- /FRONT CONTENT --> <!-- BACKGROUND CONTENT --> <div class="background-content parallax-on"> <!-- BACKGROUND CONTENT INNER --> <div class="background-content-inner"> <div class="background-overlay"></div> <div class="background-img layer" data-depth="0.05"></div> </div> <!-- /BACKGROUND CONTENT INNER --> </div> <!-- /BACKGROUND CONTENT --> </div> <!-- /HERO --> <!-- POPUP FAQ --> <div id="popup-faq" class="popup"> <!-- CONTAINER FLUID --> <div class="container-fluid"> <h4>Frequently Asked Questions</h4> <!-- ITEM --> <div class="item"> <p class="question">Lorem ipsum dolor sit amet, consectetur adipiscing elit?</p> <p class="answer">Maecenas congue augue eget blandit congue. Aliquam nec mattis elit. Mauris a leo erat. Proin vulputate tincidunt diam nec auctor. Pellentesque sit amet lobortis tellus. Pellentesque congue tortor ut elementum dapibus. Suspendisse potenti. Curabitur tincidunt est ac felis porttitor, cursus varius nibh condimentum.</p> </div> <!-- /ITEM --> <!-- ITEM --> <div class="item"> <p class="question">Lorem ipsum dolor sit amet, consectetur adipiscing elit?</p> <p class="answer">Maecenas congue augue eget blandit congue. Aliquam nec mattis elit. Mauris a leo erat. Proin vulputate tincidunt diam nec auctor. Pellentesque sit amet lobortis tellus. Pellentesque congue tortor ut elementum dapibus. Suspendisse potenti. Curabitur tincidunt est ac felis porttitor, cursus varius nibh condimentum.</p> </div> <!-- /ITEM --> <!-- ITEM --> <div class="item"> <p class="question">Lorem ipsum dolor sit amet, consectetur adipiscing elit?</p> <p class="answer">Maecenas congue augue eget blandit congue. Aliquam nec mattis elit. Mauris a leo erat. Proin vulputate tincidunt diam nec auctor. Pellentesque sit amet lobortis tellus. Pellentesque congue tortor ut elementum dapibus. Suspendisse potenti. Curabitur tincidunt est ac felis porttitor, cursus varius nibh condimentum.</p> </div> <!-- /ITEM --> <!-- ITEM --> <div class="item"> <p class="question">Lorem ipsum dolor sit amet, consectetur adipiscing elit?</p> <p class="answer">Maecenas congue augue eget blandit congue. Aliquam nec mattis elit. Mauris a leo erat. Proin vulputate tincidunt diam nec auctor. Pellentesque sit amet lobortis tellus. Pellentesque congue tortor ut elementum dapibus. Suspendisse potenti. Curabitur tincidunt est ac felis porttitor, cursus varius nibh condimentum.</p> </div> <!-- /ITEM --> </div> <!-- /CONTAINER FLUID --> </div> <!-- /POPUP FAQ --> <!-- POPUP PRIVACY POLICY & TERMS --> <div id="popup-privacy-terms" class="popup"> <!-- CONTAINER FLUID --> <div class="container-fluid"> <h4>Terms of Service and Privacy Policy</h4> <!-- ITEM --> <div class="item"> <p class="headline">1. Terms</p> <p>Maecenas congue augue eget blandit congue. Aliquam nec mattis elit. Mauris a leo erat. Proin vulputate tincidunt diam nec auctor. Pellentesque sit amet lobortis tellus. Pellentesque congue tortor ut elementum dapibus. Suspendisse potenti. Curabitur tincidunt est ac felis porttitor, cursus varius nibh condimentum.</p> </div> <!-- /ITEM --> <!-- ITEM --> <div class="item"> <p class="headline">2. Use License</p> <p>Maecenas congue augue eget blandit congue. Aliquam nec mattis elit. Mauris a leo erat. Proin vulputate tincidunt diam nec auctor. Pellentesque sit amet lobortis tellus. Pellentesque congue tortor ut elementum dapibus. Suspendisse potenti. Curabitur tincidunt est ac felis porttitor, cursus varius nibh condimentum.</p> </div> <!-- /ITEM --> <!-- ITEM --> <div class="item"> <p class="headline">3. Disclamer</p> <p>Maecenas congue augue eget blandit congue. Aliquam nec mattis elit. Mauris a leo erat. Proin vulputate tincidunt diam nec auctor. Pellentesque sit amet lobortis tellus. Pellentesque congue tortor ut elementum dapibus. Suspendisse potenti. Curabitur tincidunt est ac felis porttitor, cursus varius nibh condimentum.</p> </div> <!-- /ITEM --> <!-- ITEM --> <div class="item"> <p class="headline">4. Limitations</p> <p>Maecenas congue augue eget blandit congue. Aliquam nec mattis elit. Mauris a leo erat. Proin vulputate tincidunt diam nec auctor. Pellentesque sit amet lobortis tellus. Pellentesque congue tortor ut elementum dapibus. Suspendisse potenti. Curabitur tincidunt est ac felis porttitor, cursus varius nibh condimentum.</p> </div> <!-- /ITEM --> <!-- ITEM --> <div class="item"> <p class="headline">5. Privacy Policy</p> <p>Maecenas congue augue eget blandit congue. Aliquam nec mattis elit. Mauris a leo erat. Proin vulputate tincidunt diam nec auctor. Pellentesque sit amet lobortis tellus. Pellentesque congue tortor ut elementum dapibus. Suspendisse potenti. Curabitur tincidunt est ac felis porttitor, cursus varius nibh condimentum.</p> <p>Maecenas congue augue eget blandit congue. Aliquam nec mattis elit. Mauris a leo erat. Proin vulputate tincidunt diam nec auctor. Pellentesque sit amet lobortis tellus. Pellentesque congue tortor ut elementum dapibus. Suspendisse potenti. Curabitur tincidunt est ac felis porttitor, cursus varius nibh condimentum.</p> </div> <!-- /ITEM --> </div> <!-- /CONTAINER FLUID --> </div> <!-- /POPUP PRIVACY POLICY & TERMS --> <!-- JAVASCRIPTS -->
