模板描述:蓝色简洁形式 pc+wap 左右分栏主页。左右分栏展示效果。鼠标移动在图片区域或者文字区域上有放大效果和展开效果。适用左右分栏主页行业。同时兼容手机端和电脑网页端。
代码结构
1. 引入CSS
<link href="https://fonts.googleapis.com/css?family=Abril+Fatface%7CArapey&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"> <div class="spinner"></div> </div> <!-- /PRELOADER --> <!-- IMAGE CONTAINER --> <div class="image-container"> <div class="background-img"></div> </div> <!-- /IMAGE CONTAINER --> <!-- CONTENT AREA --> <div class="content-area"> <!-- CONTENT AREA INNER --> <div class="content-area-inner"> <!-- INTRO --> <section id="intro"> <!-- CONTAINER MID --> <div class="container-mid"> <!-- ANIMATION CONTAINER --> <div class="animation-container animation-fade-down" data-animation-delay="0"> <h1>I’m John Miller,</h1> </div> <!-- /ANIMATION CONTAINER --> <!-- ANIMATION CONTAINER --> <div class="animation-container animation-fade-left" data-animation-delay="300"> <p class="subline">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc condimentum lacinia molestie. Phasellus vehicula ornare odio, blandit commodo nisl dapibus vel. Sed vel fermentum elit.</p> </div> <!-- /ANIMATION CONTAINER --> <!-- ANIMATION CONTAINER --> <div class="animation-container animation-fade-up" data-animation-delay="600"> <a href="#about" class="smooth-scroll">Learn More<i class="fa fa-angle-down" aria-hidden="true"></i></a> </div> <!-- /ANIMATION CONTAINER --> </div> <!-- /CONTAINER MID --> </section> <!-- /INTRO --> <!-- ABOUT --> <section id="about"> <h3 class="headline scroll-animated-from-right">Why I can help you.</h3> <p class="scroll-animated-from-right">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper faucibus eros, quis imperdiet sapien. Nam sodales nec risus nec interdum. Proin lobortis, ex condimentum ultricies eleifend, nisl nunc sollicitudin odio, eget egestas est turpis et metus. In non ligula quis mauris rutrum porta.</p> <p class="scroll-animated-from-right">Duis consectetur massa sit amet nibh rhoncus, at pharetra ligula aliquet. Ut ac velit vestibulum, eleifend diam ut, malesuada nisi. Sed vel felis vitae diam luctus commodo. Nunc ipsum est, vulputate id orci ac, luctus consectetur sapien.</p> </section> <!-- /ABOUT --> <!-- SERVICE --> <section id="service"> <h3 class="headline scroll-animated-from-right">What I can do for you.</h3> <!-- SERVICE LIST --> <ul class="services-list"> <li class="scroll-animated-from-right"><i class="fa fa-pencil-square-o" aria-hidden="true"></i>Concept & Strategy</li> <li class="scroll-animated-from-right"><i class="fa fa-eye" aria-hidden="true"></i>Design Direction</li> <li class="scroll-animated-from-right"><i class="fa fa-database" aria-hidden="true"></i>Product Design</li> <li class="scroll-animated-from-right"><i class="fa fa-television" aria-hidden="true"></i>Web Design</li> <li class="scroll-animated-from-right"><i class="fa fa-square-o" aria-hidden="true"></i>UI & UX Design</li> </ul> <!-- /SERVICE LIST --> </section> <!-- /SERVICE --> <!-- WORK --> <section id="work"> <h3 class="headline scroll-animated-from-right">My latest Work.</h3> <!-- SHOWCASE --> <div class="showcase"> <!-- ITEM --> <div class="item scroll-animated-from-right"> <!-- LIGHTBOX LINK --> <a href="#" data-featherlight="#item-1-lightbox"> <!-- INFO --> <div class="info"> <!-- CONTAINER MID --> <div class="container-mid"> <h5>Fashion Inc.</h5> <p>Web Design</p> </div> <!-- /CONTAINER MID --> </div> <!-- /INFO --> <div class="background-image" style="background-image: url(assets/img/work/item-1.jpg)"></div> </a> <!-- /LIGHTBOX LINK --> <!-- LIGHTBOX --> <div id="item-1-lightbox" class="work-lightbox"> <img class="img-responsive" src="assets/img/work/item-1.jpg" alt="image"> <h3>Fashion Inc.</h3> <p class="subline">Web Design</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper faucibus eros, quis imperdiet sapien. Nam sodales nec risus nec interdum. Proin lobortis, ex condimentum ultricies eleifend, nisl nunc sollicitudin odio, eget egestas est turpis et metus. In non ligula quis mauris rutrum porta.</p> </div> <!-- /LIGHTBOX --> </div> <!-- /ITEM --> <!-- ITEM --> <div class="item scroll-animated-from-right"> <!-- LIGHTBOX LINK --> <a href="#" data-featherlight="#item-2-lightbox"> <!-- INFO --> <div class="info"> <!-- CONTAINER MID --> <div class="container-mid"> <h5>Asimov 71</h5> <p>Product Design</p> </div> <!-- /CONTAINER MID --> </div> <!-- /INFO --> <div class="background-image" style="background-image: url(assets/img/work/item-2.jpg)"></div> </a> <!-- /LIGHTBOX LINK --> <!-- LIGHTBOX --> <div id="item-2-lightbox" class="work-lightbox"> <img class="img-responsive" src="assets/img/work/item-2.jpg" alt="image"> <h3>Asimov 71</h3> <p class="subline">Product Design</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper faucibus eros, quis imperdiet sapien. Nam sodales nec risus nec interdum. Proin lobortis, ex condimentum ultricies eleifend, nisl nunc sollicitudin odio, eget egestas est turpis et metus. In non ligula quis mauris rutrum porta.</p> </div> <!-- /LIGHTBOX --> </div> <!-- /ITEM --> <!-- ITEM --> <div class="item scroll-animated-from-right"> <!-- LIGHTBOX LINK --> <a href="#" data-featherlight="#item-3-lightbox"> <!-- INFO --> <div class="info"> <!-- CONTAINER MID --> <div class="container-mid"> <h5>Hardley & Sons</h5> <p>Design Direction</p> </div> <!-- /CONTAINER MID --> </div> <!-- /INFO --> <div class="background-image" style="background-image: url(assets/img/work/item-3.jpg)"></div> </a> <!-- /LIGHTBOX LINK --> <!-- LIGHTBOX --> <div id="item-3-lightbox" class="work-lightbox"> <img class="img-responsive" src="assets/img/work/item-3.jpg" alt="image"> <h3>Hardley & Sons</h3> <p class="subline">Design Direction</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper faucibus eros, quis imperdiet sapien. Nam sodales nec risus nec interdum. Proin lobortis, ex condimentum ultricies eleifend, nisl nunc sollicitudin odio, eget egestas est turpis et metus. In non ligula quis mauris rutrum porta.</p> </div> <!-- /LIGHTBOX --> </div> <!-- /ITEM --> <!-- ITEM --> <div class="item scroll-animated-from-right"> <!-- LIGHTBOX LINK --> <a href="#" data-featherlight="#item-4-lightbox"> <!-- INFO --> <div class="info"> <!-- CONTAINER MID --> <div class="container-mid"> <h5>Starnation</h5> <p>UI/UX DESIGN</p> </div> <!-- /CONTAINER MID --> </div> <!-- /INFO --> <div class="background-image" style="background-image: url(assets/img/work/item-4.jpg)"></div> </a> <!-- /LIGHTBOX LINK --> <!-- LIGHTBOX --> <div id="item-4-lightbox" class="work-lightbox"> <img class="img-responsive" src="assets/img/work/item-4.jpg" alt="image"> <h3>Starnation</h3> <p class="subline">UI/UX DESIGN</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper faucibus eros, quis imperdiet sapien. Nam sodales nec risus nec interdum. Proin lobortis, ex condimentum ultricies eleifend, nisl nunc sollicitudin odio, eget egestas est turpis et metus. In non ligula quis mauris rutrum porta.</p> </div> <!-- /LIGHTBOX --> </div> <!-- /ITEM --> </div> <!-- /SHOWCASE --> </section> <!-- /WORK --> <!-- CONTACT --> <section id="contact"> <h3 class="headline scroll-animated-from-right">Contact Me.</h3> <!-- CONTACT LIST --> <ul class="contact-list"> <li class="scroll-animated-from-right"><i class="fa fa-mobile" aria-hidden="true"></i>01572 115522</li> <li class="scroll-animated-from-right"><i class="fa fa-envelope-o" aria-hidden="true"></i>[email protected]</li> </ul> <!-- /CONTACT LIST --> <!-- CONTACT FORM --> <form id="contact-form" action="assets/php/contact.php" method="post"> <input id="contact-form-name" type="text" name="name" class="form-control scroll-animated-from-right" placeholder="* Your Name"> <input id="contact-form-email" type="text" name="email" class="form-control scroll-animated-from-right" placeholder="* Your Email"> <!-- PHANTOM ELEMENT ( HONEYPOT CAPTCHA FOR SECURITY ) --> <div class="fhp-input"><input id="contact-form-company" type="text" name="company" class="form-control"></div> <!-- /PHANTOM ELEMENT ( HONEYPOT CAPTCHA FOR SECURITY ) --> <textarea id="contact-form-message" name="message" class="form-control scroll-animated-from-right" placeholder="* Your Message"></textarea> <button type="submit" class="form-control scroll-animated-from-right">Send Mail</button> <div class="success-message">* The Email was Sent Successfully!</div> </form> <!-- /CONTACT FORM --> </section> <!-- /CONTACT --> <!-- FOOTER --> <section id="footer"> <!-- SOCIAL ICONS --> <ul class="social-icons scroll-animated-from-right"> <li><a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a></li> <li><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a></li> <li><a href="#"><i class="fa fa-google-plus" aria-hidden="true"></i></a></li> <li><a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a></li> </ul> <!-- /SOCIAL ICONS --> <p class="scroll-animated-from-right">Copyright © 2019.Company name All rights reserved.<a target="_blank" href="http://sc.51qianduan.com/moban/">网页模板</a></p> </section> <!-- /FOOTER --> </div> <!-- /CONTENT AREA INNER --> </div> <!-- /CONTENT AREA --> <!-- JAVASCRIPTS -->