bootstarp模板02
HTML代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Place favicon.ico and apple-touch-icon.png in the root directory --> <!-- CSS --> <link rel="stylesheet" href="css/owl.carousel.css"> <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="css/font-awesome.min.css"> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/ionicons.min.css"> <link rel="stylesheet" href="css/animate.css"> <link rel="stylesheet" href="css/responsive.css"> <!-- Js --> <script src="js/vendor/modernizr-2.6.2.min.js"></script> <script src="js/vendor/jquery-1.10.2.min.js"></script> <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.2.min.js"><\/script>')</script> <script src="js/bootstrap.min.js"></script> <script src="js/owl.carousel.min.js"></script> <script src="js/plugins.js"></script> <script src="js/min/waypoints.min.js"></script> <script src="js/jquery.counterup.js"></script> <script src="js/main.js"></script> <script src="js/jquery-3.1.1.js"></script> </head> <body> <header> <div class="container"> <div class="row"> <div class="col-md-12"> <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="index.html"> <img src="img/logo.png" alt="logo"> </a> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav navbar-right"> <li><a href="index.html">Home</a></li> <li><a href="work.html">Work</a></li> <li><a href="#">Support</a></li> <li><a href="#">Service</a></li> <li><a href="contact.html">Contact</a></li> </ul> </div> </div> </nav> </div> </div> </div> </header> <section id="slider"> <div class="container"> <div class="row"> <div class="col-md-10 col-md-offset-2"> <div class="block"> <h1 class="animated fadeInup"> A DIGITAL MARKETING & <br> DESIGN AGENCY </h1> <p class="animated fadeInUp">We love the Web and the work we do.We work closely with our <br> clients to deliver the best possible solutions for their needs </p> </div> </div> </div> </div> </section> <section id="intro"> <div class="container"> <div class="row"> <div class="col-md-7 col-sm-12"> <div class="block"> <div class="section=title"> <h2>About Us</h2> <p> Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics </p> </div> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id </p> </div> </div> <div class="col-md-5 col-sm-12"> <div class="block"> <img src="img/wrapper-img.png" alt="Img"> </div> </div> </div> </div> </section> <section id="feature"> <div class="container"> <div class="row"> <div class="col-md-6 col-md-offset-6"> <h2>WE BELIEVE IN GREAT IDEAS</h2> <p>Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. </p> <p>Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. </p> <p>Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. </p> <a href="#" class="btn btn-view-works">View Works</a> </div> </div> </div> </section> <section id="service"> <div class="container"> <div class="row"> <div class="section-title"> <h2>Our Service</h2> <p> Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics </p> </div> </div> <div class="row"> <div class="col-sm-6 col-md-3"> <div class="service-item"> <i class="icon ion-coffee"></i> <h4>Branding</h4> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut </p> </div> </div> <div class="col-sm-6 col-md-3"> <div class="service-item"> <i class="icon ion-coffee"></i> <h4>Branding</h4> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut </p> </div> </div> <div class="col-sm-6 col-md-3"> <div class="service-item"> <i class="icon ion-coffee"></i> <h4>Branding</h4> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut </p> </div> </div> <div class="col-sm-6 col-md-3"> <div class="service-item"> <i class="icon ion-coffee"></i> <h4>Branding</h4> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut </p> </div> </div> <div class="col-sm-6 col-md-3"> <div class="service-item"> <i class="icon ion-coffee"></i> <h4>Branding</h4> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut </p> </div> </div> <div class="col-sm-6 col-md-3"> <div class="service-item"> <i class="icon ion-coffee"></i> <h4>Branding</h4> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut </p> </div> </div> <div class="col-sm-6 col-md-3"> <div class="service-item"> <i class="icon ion-coffee"></i> <h4>Branding</h4> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut </p> </div> </div> <div class="col-sm-6 col-md-3"> <div class="service-item"> <i class="icon ion-coffee"></i> <h4>Branding</h4> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut </p> </div> </div> </div> </div> </section> <section id="call-to-action"> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="block"> <h2>We design delightful digital experiences.</h2> <p> Read more about what we do and our philosophy of design. Judge for yourself The work and results we’ve achieved for other clients, and meet our highly experienced Team who just love to design. </p> <a class="btn btn-default btn-call-to-action" href="#">Tell Us Your Story</a> </div> </div> </div> </div> </section> <section id="testimonial"> <div class="container"> <div class="row"> <div class="section-title text-center"> <h2>Fun Facts About Us</h2> <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics </p> </div> </div> </div> </section> <footer> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="footer-manu"> <ul> <li><a href="#">About Us</a></li> <li><a href="#">Contact us</a></li> <li><a href="#">How it works</a></li> <li><a href="#">Support</a></li> <li><a href="#">Terms</a></li> </ul> </div> <p>Copyright © 2017.Company name All rights reserved. </p> </div> </div> </div> </footer> </body> </html>
CSS(demo.css)代码
header { background: #fff; padding: 20px 0; } body { font-family: 'Open Sans', sans-serif; -webkit-font-smoothing: antialiased; } header .navbar-default { background: none; border: 0px; } header .navbar { margin-bottom: 0px; border: 0px; } header .navbar-brand { padding-top: 5px; } header .navbar-default .navbar-nav { padding-top: 10px; } ul { padding: 0; margin: 0; list-style: none; } header .navbar-default .navbar-nav li a { color: #333333; padding: 10px 26px; font-size: 15px; } #slider { background: url(../img/slider-bg.jpg) no-repeat; background-size: cover; background-attachment: fixed; background-position: 10% 0%; padding: 200px 0 280px 0; position: relative; } #slider .block { color: #E3E3E4; } #slider .block h1 { font-family: 'Roboto', sans-serif; font-weight: 100; font-size: 45px; line-height: 60px; letter-spacing: 10px; padding-bottom: 45px; } #slider .block p { font-size: 23px; line-height: 40px; font-family: 'Roboto', sans-serif; font-weight: 300; letter-spacing: 3px; } #intro { padding: 100px 0; } #intro .section-title { margin-bottom: 0px; } #intro .block h2 { padding-top: 35px; line-height: 27px; margin: 0; } .section-title h2 { text-transform: uppercase; font-size: 28px; font-weight: 600; } h1, h2, h3, h4, h5, h6 { font-family: 'Roboto', sans-serif; } h2 { font-size: 30px; font-weight: 400; } #intro .section-title p { padding-top: 20px; } #intro .block p { color: #7B7B7B; padding-top: 20px; } .section-title p { font-family: 'Volkhov', serif; font-style: italic; color: #666; } p { font-size: 15px; line-height: 28px; } #feature { background: url(../img/featue-bg.jpg); background-position: 50% 94px; width: 100%; display: block; position: relative; overflow: visible; background-attachment: fixed; background-repeat: no-repeat; background-position: center center; background-color: #fff; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-backface-visibility: hidden; backface-visibility: hidden; padding: 100px 0; } #feature h2 { font-size: 28px; font-weight: 600; margin-bottom: 30px; } #feature p { color: #8d8f92; margin-bottom: 20px; } #feature .btn-view-works { background: #655E7A; color: #fff; padding: 10px 20px; } #service { text-align: center; padding: 90px 0; } .section-title { margin-bottom: 70px; } .section-title h2 { text-transform: uppercase; font-size: 28px; font-weight: 600; } .section-title p { font-family: 'Volkhov', serif; font-style: italic; color: #666; } #service .service-item { padding-bottom: 30px; } #service .service-item i { font-size: 60px; color: #4A4656; } #service .service-item h4 { padding-top: 20px; margin: 0; color: #666; } #call-to-action { background: url(../img/call-to-action-bg.jpg) no-repeat; background-size: cover; background-attachment: fixed; padding: 70px 0px; position: relative; text-align: center; color: #fff; } #call-to-action h2 { padding-bottom: 20px; line-height: 33px; margin: 0; font-size: 30px; } #call-to-action p { font-size: 14px; line-height: 1.6; }
效果
移动端
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步