模板描述:黑色 简洁 响应式 4A广告 企业网页模板。黑色简洁风格响应式4A广告企业网页模板HTML模板下载
代码结构
1. 引入CSS
<link rel="stylesheet" href="assets/css/bootstrap.min.css"> <link rel="stylesheet" href="assets/css/font-awesome.min.css"> <link rel="stylesheet" href="assets/css/animate.css"> <link rel="stylesheet" href="assets/css/owl.carousel.css"> <link rel="stylesheet" href="assets/css/owl.theme.css"> <link rel="stylesheet" href="assets/css/style.css">
2. 引入JS
<script type="text/javascript" src="assets/js/modernizr.custom.97074.js"></script> <script type="text/javascript" src="assets/js/jquery-2.1.3.min.js"></script> <script type="text/javascript" src="assets/js/bootstrap.min.js"></script> <script type="text/javascript" src="assets/js/owl.carousel.js"></script> <script type="text/javascript" src="assets/js/jquery.hoverdir.js"></script>
3. HTML代码
<div id="home-page"> <!-- site-navigation start --> <nav id="mainNavigation" class="navbar navbar-dafault main-navigation" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-nav-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <!-- navbar logo --> <div class="navbar-brand"> <span class="sr-only">Avada Pro Agency</span> <a href="index.html"> <img src="assets/img/main_logo.png" class="img-responsive center-block" alt="logo"> </a> </div> <!-- navbar logo --> </div><!-- /.navbar-header --> <!-- nav links --> <div class="collapse navbar-collapse" id="main-nav-collapse"> <ul class="nav navbar-nav navbar-right text-uppercase"> <li> <a href="index.html"><span>home</span></a> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span>pages</span></a> <ul class="dropdown-menu"> <li> <a href="about.html">about</a> </li> <li> <a href="service.html">service</a> </li> <li> <a href="portfolio.html">portfolio</a> </li> <li> <a href="gallery.html">gallery</a> </li> <li> <a href="404.html">404 page</a> </li> <li> <a href="coming_soon.html">coming soon</a> </li> </ul> <!-- end of /.dropdown-menu --> </li> <!-- end of /.dropdown --> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span>blog</span></a> <ul class="dropdown-menu"> <li> <a href="multiple_blog_left_sidebar.html">multiple with left sidebar</a> </li> <li> <a href="multiple_blog.html">multiple with right sidebar</a> </li> <li> <a href="single_blog_left_sidebar.html">single with left sidebar</a> </li> <li> <a href="single_blog.html">single with right sidebar</a> </li> <li> <a href="single_blog_full_width.html">single full width</a> </li> </ul> <!-- end of /.dropdown-menu --> </li> <!-- end of /.dropdown --> <li> <a href="contact.html"><span>contact</span></a> </li> </ul> </div><!-- nav links --> </div><!-- /.container --> </nav> <!-- site-navigation end --> <!-- header start --> <header id="header" class="header-wrapper home-parallax home-fade"> <div class="header-overlay"></div> <div class="header-wrapper-inner"> <div class="container"> <div class="welcome-speech"> <h1>Welcome to our avada agency</h1> <p>Everything you need to have in order to build a stunning website</p> <a href="#" class="btn btn-white"> Our Works </a> </div><!-- /.intro --> </div><!-- /.container --> </div><!-- /.header-wrapper-inner --> </header> <!-- /#header --> <div class="main-content"> <!-- begin intro section --> <section class="intro bg-light-gray"> <div class="container"> <div class="row"> <div class="col-md-5"> <img src="assets/img/intro.jpg" class="img-responsive center-block" alt="intro"> </div> <div class="col-md-7"> <div class="intro-description"> <h2>avada the best agency for ever</h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ante ex, fermentum vel libero eget interdum semper libero. Curabitur egestas, arcu id tempor convallis. </p> <ul class="points"> <li> <span> <i class="fa fa-star"></i> </span> Vestibulum pulvinar commodo malesuada. </li> <li> <span> <i class="fa fa-star"></i> </span> Pellentesque id massa et ligula convallis porta. </li> <li> <span> <i class="fa fa-star"></i> </span> Vivamus sed nunc sed ligula rhoncus sit amet eu elit. </li> <li> <span> <i class="fa fa-star"></i> </span> Curabitur in ipsum vel ipsum vehicula congue. </li> </ul> <!-- end of /.points --> <a href="#" class="btn btn-slategray"> purchase </a> <!-- /purchase button --> </div> <!-- end of /.intro-description --> </div> </div> </div> <!-- end of /.container --> </section> <!-- end of intro section --> <!-- begin feature section --> <section class="bg-white feature"> <div class="container"> <div class="row"> <div class="col-md-3"> <div class="feature-content text-center"> <div class="feature-icon-box"> <div class="feature-icon center-block"> <i class="fa fa-laptop"></i> </div> </div> <!-- end of /.feature-icon-box --> <div class="feature-info"> <h3 class="feature-heading">Responsive & Multi-purpose</h3> <p class="feature-description"> Class aptent taciti sociosqu ad litora torquent conubia nostra, per inceptos himenaeos. </p> <!-- end of /.feature-description --> </div> <!-- end of /.feature-info --> </div> <!-- end of /.feature-content --> </div> <div class="col-md-3"> <div class="feature-content text-center"> <div class="feature-icon-box"> <div class="feature-icon center-block"> <i class="fa fa-eye"></i> </div> </div> <!-- end of /.feature-icon-box --> <div class="feature-info"> <h3 class="feature-heading">Clean & Clear</h3> <p class="feature-description"> Class aptent taciti sociosqu ad litora torquent conubia nostra, per inceptos himenaeos. </p> <!-- end of /.feature-description --> </div> <!-- end of /.feature-info --> </div> <!-- end of /.feature-content --> </div> <div class="col-md-3"> <div class="feature-content text-center"> <div class="feature-icon-box"> <div class="feature-icon center-block"> <i class="fa fa-thumbs-o-up"></i> </div> </div> <!-- end of /.feature-icon-box --> <div class="feature-info"> <h3 class="feature-heading">Best UX</h3> <p class="feature-description"> Class aptent taciti sociosqu ad litora torquent conubia nostra, per inceptos himenaeos. </p> <!-- end of /.feature-description --> </div> <!-- end of /.feature-info --> </div> <!-- end of /.feature-content --> </div> <div class="col-md-3"> <div class="feature-content text-center"> <div class="feature-icon-box"> <div class="feature-icon center-block"> <i class="fa fa-star"></i> </div> </div> <!-- end of /.feature-icon-box --> <div class="feature-info"> <h3 class="feature-heading">Good Feedback</h3> <p class="feature-description"> Class aptent taciti sociosqu ad litora torquent conubia nostra, per inceptos himenaeos. </p> <!-- end of /.feature-description --> </div> <!-- end of /.feature-info --> </div> <!-- end of /.feature-content --> </div> </div> </div> <!-- end of /.container --> </section> <!-- end of feature section --> <!-- begin portfolio section --> <section class="bg-light-gray"> <div class="container"> <div class="headline text-center"> <div class="row"> <div class="col-md-6 col-md-offset-3"> <h2 class="section-title">show off our portfolio</h2> <p class="section-sub-title"> absolutely stunning design & functionality </p> <!-- /.section-sub-title --> </div> </div> </div> <!-- /.headline --> <div class="portfolio-item-list"> <div class="row"> <div class="col-md-4 col-sm-6"> <div class="portfolio-item"> <div class="item-image"> <a href="#"> <img src="assets/img/portfolio1.jpg" class="img-responsive center-block" alt="portfolio1"> <div><span><i class="fa fa-plus"></i></span></div> </a> </div> <div class="item-description"> <div class="row"> <div class="col-xs-6"> <span class="item-name"> Oliver a Note </span> <span> Fashion </span> </div> <div class="col-xs-6"> <span class="like"> <i class="fa fa-heart-o"></i> 576 </span> </div> </div> </div> <!-- end of /.item-description --> </div> <!-- end of /.portfolio-item --> </div> <div class="col-md-4 col-sm-6"> <div class="portfolio-item"> <div class="item-image"> <a href="#"> <img src="assets/img/portfolio2.jpg" class="img-responsive center-block" alt="portfolio2"> <div><span><i class="fa fa-plus"></i></span></div> </a> </div> <div class="item-description"> <div class="row"> <div class="col-xs-6"> <span class="item-name"> Shift Magazine </span> <span> Photography </span> </div> <div class="col-xs-6"> <span class="like"> <i class="fa fa-heart-o"></i> 576 </span> </div> </div> </div> <!-- end of /.item-description --> </div> <!-- end of /.portfolio-item --> </div> <div class="col-md-4 col-sm-6"> <div class="portfolio-item"> <div class="item-image"> <a href="#"> <img src="assets/img/portfolio3.jpg" class="img-responsive center-block" alt="portfolio3"> <div><span><i class="fa fa-plus"></i></span></div> </a> </div> <div class="item-description"> <div class="row"> <div class="col-xs-6"> <span class="item-name"> Camp Pine Tree </span> <span> Web Design </span> </div> <div class="col-xs-6"> <span class="like"> <i class="fa fa-heart-o"></i> 576 </span> </div> </div> </div> <!-- end of /.item-description --> </div> <!-- end of /.portfolio-item --> </div> <div class="col-md-4 col-sm-6"> <div class="portfolio-item"> <div class="item-image"> <a href="#"> <img src="assets/img/portfolio4.jpg" class="img-responsive center-block" alt="portfolio4"> <div><span><i class="fa fa-plus"></i></span></div> </a> </div> <div class="item-description"> <div class="row"> <div class="col-xs-6"> <span class="item-name"> Free Art App Design </span> <span> Photography </span> </div> <div class="col-xs-6"> <span class="like"> <i class="fa fa-heart-o"></i> 576 </span> </div> </div> </div> <!-- end of /.item-description --> </div> <!-- end of /.portfolio-item --> </div> <div class="col-md-4 col-sm-6"> <div class="portfolio-item"> <div class="item-image"> <a href="#"> <img src="assets/img/portfolio5.jpg" class="img-responsive center-block" alt="portfolio5"> <div><span><i class="fa fa-plus"></i></span></div> </a> </div> <div class="item-description"> <div class="row"> <div class="col-xs-6"> <span class="item-name"> Large Poster Set </span> <span> Marketing </span> </div> <div class="col-xs-6"> <span class="like"> <i class="fa fa-heart-o"></i> 576 </span> </div> </div> </div> <!-- end of /.item-description --> </div> <!-- end of /.portfolio-item --> </div> <div class="col-md-4 col-sm-6"> <div class="portfolio-item"> <div class="item-image"> <a href="#"> <img src="assets/img/portfolio6.jpg" class="img-responsive center-block" alt="portfolio6"> <div><span><i class="fa fa-plus"></i></span></div> </a> </div> <div class="item-description"> <div class="row"> <div class="col-xs-6"> <span class="item-name"> Skilet Album Cover </span> <span> Business </span> </div> <div class="col-xs-6"> <span class="like"> <i class="fa fa-heart-o"></i> 576 </span> </div> </div> </div> <!-- end of /.item-description --> </div> <!-- end of /.portfolio-item --> </div> </div> </div> <!-- end of portfolio-item-list --> </div> </section> <!-- end of portfolio section --> <!-- begin twitter-feed section --> <section class="twit-feed"> <div class="twit-feed-wrapper"> <div class="container"> <div class="row"> <div class="col-md-10 col-md-offset-1"> <div id="twit" class="owl-carousel owl theme"> <div class="item text-center"> <div class="twit-content"> <div class="twit-icon"> <i class="fa fa-twitter"></i> </div> <h3 class="text-capitalize">free stock photos: 74 best sites to find Awesome free images</h3> <p> @themewagon <br/> 2 days ago on Twitter.com </p> </div> </div> <div class="item text-center"> <div class="twit-content"> <div class="twit-icon"> <i class="fa fa-twitter"></i> </div> <h3 class="text-capitalize">free stock photos: 74 best sites to find Awesome free images</h3> <p> @themewagon <br/> 2 days ago on Twitter.com </p> </div> </div> <div class="item text-center"> <div class="twit-content"> <div class="twit-icon"> <i class="fa fa-twitter"></i> </div> <h3 class="text-capitalize">free stock photos: 74 best sites to find Awesome free images</h3> <p> @themewagon <br/> 2 days ago on Twitter.com </p> </div> </div> </div> </div> </div> </div> </div> </section> <!-- end of /.twit-feed section --> <!-- begin pricing section --> <section class="bg-light-gray"> <div class="container"> <div class="headline text-center"> <div class="row"> <div class="col-md-6 col-md-offset-3"> <h2 class="section-title">affordable pricing</h2> <p class="section-sub-title"> absolutely stunning design & functionality </p> <!-- /.section-sub-title --> </div> </div> </div> <!-- /.headline --> <div class="row"> <div class="col-md-3 col-sm-6"> <div class="price-box"> <h3>Standard</h3> <div class="price-info"> <span>15 Projects</span> <span>30 GB Storage</span> <span>Ultimate Data Transfer</span> <span>50 GB Bandwith</span> <span>Enhanced Security</span> <span>24/7 Support</span> <p class="price"><sup>$</sup><span>25</span>/MO</p> </div> <!-- /.price-info --> <a href="#" class="btn pricing-btn">Get Started</a> </div> <!-- /.price-box --> </div> <div class="col-md-3 col-sm-6"> <div class="price-box"> <h3>Business</h3> <div class="price-info"> <span>15 Projects</span> <span>30 GB Storage</span> <span>Ultimate Data Transfer</span> <span>50 GB Bandwith</span> <span>Enhanced Security</span> <span>24/7 Support</span> <p class="price"><sup>$</sup><span>35</span>/MO</p> </div> <!-- /.price-info --> <a href="#" class="btn pricing-btn">Get Started</a> </div> <!-- /.price-box --> </div> <div class="col-md-3 col-sm-6"> <div class="price-box"> <h3>Premium</h3> <div class="price-info"> <span>15 Projects</span> <span>30 GB Storage</span> <span>Ultimate Data Transfer</span> <span>50 GB Bandwith</span> <span>Enhanced Security</span> <span>24/7 Support</span> <p class="price"><sup>$</sup><span>45</span>/MO</p> </div> <!-- /.price-info --> <a href="#" class="btn pricing-btn">Get Started</a> </div> <!-- /.price-box --> </div> <div class="col-md-3 col-sm-6"> <div class="price-box"> <h3>Ultimate</h3> <div class="price-info"> <span>15 Projects</span> <span>30 GB Storage</span> <span>Ultimate Data Transfer</span> <span>50 GB Bandwith</span> <span>Enhanced Security</span> <span>24/7 Support</span> <p class="price"><sup>$</sup><span>55</span>/MO</p> </div> <!-- /.price-info --> <a href="#" class="btn pricing-btn">Get Started</a> </div> <!-- /.price-box --> </div> </div> </div> </section> <!-- end of pricing section --> <!-- begin testimonial section --> <section class="bg-light-gray"> <div class="container"> <div class="headline text-center"> <div class="row"> <div class="col-md-6 col-md-offset-3"> <h2 class="section-title">testimonials</h2> <p class="section-sub-title"> absolutely stunning design & functionality </p> <!-- /.section-sub-title --> </div> </div> </div> <!-- /.headline --> <div id="client-speech" class="owl-carousel owl-theme"> <div class="item"> <div class="row"> <div class="col-md-6"> <div class="client-box"> <div class="about-client"> <img src="assets/img/client1.jpg" alt="client1"> <p class="client-intro">technext-ceo</p> </div> <!-- end of /.about-client --> <div class="main-speech"> <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. </p> </div> <!-- end of /.main-speech --> </div> <!-- end of /.client-box --> </div> <div class="col-md-6"> <div class="client-box"> <div class="about-client"> <img src="assets/img/client2.jpg" alt="client2"> <p class="client-intro">technext-ceo</p> </div> <!-- end of /.about-client --> <div class="main-speech"> <p> It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that. </p> </div> <!-- end of /.main-speech --> </div> <!-- end of /.client-box --> </div> </div> </div> <div class="item"> <div class="row"> <div class="col-md-6"> <div class="client-box"> <div class="about-client"> <img src="assets/img/client1.jpg" alt="client3"> <p class="client-intro">technext-ceo</p> </div> <!-- end of /.about-client --> <div class="main-speech"> <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. </p> </div> <!-- end of /.main-speech --> </div> <!-- end of /.client-box --> </div> <div class="col-md-6"> <div class="client-box"> <div class="about-client"> <img src="assets/img/client2.jpg" alt="client4"> <p class="client-intro">technext-ceo</p> </div> <!-- end of /.about-client --> <div class="main-speech"> <p> It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that. </p> </div> <!-- end of /.main-speech --> </div> <!-- end of /.client-box --> </div> </div> </div> <div class="item"> <div class="row"> <div class="col-md-6"> <div class="client-box"> <div class="about-client"> <img src="assets/img/client1.jpg" alt="client5"> <p class="client-intro">technext-ceo</p> </div> <!-- end of /.about-client --> <div class="main-speech"> <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. </p> </div> <!-- end of /.main-speech --> </div> <!-- end of /.client-box --> </div> <div class="col-md-6"> <div class="client-box"> <div class="about-client"> <img src="assets/img/client2.jpg" alt="client6"> <p class="client-intro">technext-ceo</p> </div> <!-- end of /.about-client --> <div class="main-speech"> <p> It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that. </p> </div> <!-- end of /.main-speech --> </div> <!-- end of /.client-box --> </div> </div> </div> </div> <!-- end of /#client-speech /.owl-carousel --> </div> <!-- end of .container --> </section> <!-- end of testimonial section --> </div> <!-- end of /.main-content --> <footer> <div class="container"> <div class="row"> <!-- useful links --> <div class="col-md-3 col-sm-6 col-xs-6 footer-widget"> <h4>Useful Links</h4> <ul class="row footer-links"> <div class="col-md-6 col-sm-6 col-xs-6"> <li><a href="#">Web Design</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Mobile</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Services</a></li> </div> <div class="col-md-6 col-sm-6 col-xs-6"> <li><a href="#">Organization</a></li> <li><a href="#">Career</a></li> <li><a href="#">Media</a></li> <li><a href="#">24/7</a></li> <li><a href="#">Right Way</a></li> </div> </ul> </div> <!-- recent news --> <div class="col-md-3 col-sm-6 col-xs-6 footer-widget"> <h4>Recent News</h4> <div class="row footer-news"> <div class="col-md-4 col-sm-4 col-xs-6"> <img src="assets/img/intro.jpg" class="img-responsive center-block" alt="recent news 1"> </div> <div class="col-md-8 col-sm-4 col-xs-6"> <div class="row"> <p class="text-capitalize"> <a href="#"> a clear website gives more experience to the visitors </a> </p> <p class="news-date">Dec 12,2019</p> </div> </div> </div> <!-- /.footer-news --> <div class="row footer-news"> <div class="col-md-4 col-sm-4 col-xs-6"> <img src="assets/img/intro.jpg" class="img-responsive center-block" alt="recent news 2"> </div> <div class="col-md-8 col-sm-4 col-xs-6"> <div class="row"> <p class="text-capitalize"> <a href="#"> a clear website gives more experience to the visitors </a> </p> <p class="news-date">Dec 12,2019</p> </div> </div> </div> <!-- /.footer-news --> </div> <!-- /.footer-widget --> <!-- news-letter --> <div class="col-md-3 col-sm-6 col-xs-6 footer-widget"> <h4>E-News-Letter</h4> <p>Sign up for our mailing list to get latest updates and offers</p> <div class="input-group margin-bottom-sm"> <input class="form-control" type="text" placeholder="Email address"> <span class="input-group-addon"> <i class="fa fa-paper-plane fa-fw"></i> </span> </div> <p>We respect your privacy</p> </div> <!-- /.footer-widget --> <!-- about avada agency --> <div class="col-md-3 col-sm-6 col-xs-6 footer-widget"> <h4>Avada Agency</h4> <p> HUGE Website Builder is a big library of pre-designed web elements which help you to create website in few minutes. </p> <div class="footer-address"> <p> 1-800-123-HELLO <br> [email protected] </p> </div> <div class="row"> <div class="col-md-12"> <ul class="footer-share-button"> <li><a href="#"><i class="fa fa-twitter"></i></a></li> <li><a href="#"><i class="fa fa-google-plus"></i></a></li> <li><a href="#"><i class="fa fa-facebook"></i></a></li> <li><a href="#"><i class="fa fa-linkedin"></i></a></li> <li><a href="#"><i class="fa fa-youtube"></i></a></li> <li><a href="#"><i class="fa fa-pinterest"></i></a></li> <li><a href="#"><i class="fa fa-instagram"></i></a></li> </ul> <!-- /.footer-share-button --> </div> </div> </div> <!-- /.footer-widget --> </div> </div> </footer> <!-- footer-navigation start --> <nav class="hidden-xs hidden-sm navbar footer-nav" role="navigation"> <div class="container"> <div class="navbar-header"> <!-- navbar logo --> <div class="navbar-brand"> <span class="sr-only">©THEMEWAGON</span> <a href="index.html"> Copyright © 2019.Company name All rights reserved.<a href="https://www.51qianduan.com/">51前端</a> </a> </div> <!-- navbar logo --> </div><!-- /.navbar-header --> <!-- nav links --> <div class="collapse navbar-collapse" id="main-nav-collapse"> <ul class="nav navbar-nav navbar-right text-capitalize"> <li><a href="#about"> <span>home</span> </a></li> <li><a href="#services"> <span>pages</span> </a></li> <li><a href="#portfolio"> <span>features</span> </a></li> <li><a href="#team"> <span>portfolio</span> </a></li> <li><a href="#pricing"> <span>blog</span> </a></li> <li><a href="#blog"> <span>shop</span> </a></li> <li><a href="#contact"> <span>contact</span> </a></li> </ul> </div><!-- nav links --> </div><!-- /.container --> </nav> <!-- footer-navigation end --> </div> <!-- end of /#home-page --> <!-- Necessary scripts --> <!-- script for portfolio section using hoverdirection --> <script type="text/javascript"> $(function() { $('.portfolio-item > .item-image').each( function() { $(this).hoverdir({ hoverDelay : 75 }); } ); }); </script> <!-- script for twitter-feed using owl carousel--> <script type="text/javascript"> $(document).ready(function() { $("#twit").owlCarousel({ navigation : true, // Show next and prev buttons slideSpeed : 100, paginationSpeed : 400, navigationText : false, singleItem: true, autoPlay: true, pagination: false }); }); </script> <!-- script for testimonial section using owl carousel --> <script type="text/javascript"> $(document).ready(function() { $("#client-speech").owlCarousel({ autoPlay: 5000, //Set AutoPlay to 3 seconds stopOnHover: true, singleItem:true }); }); </script>