bootstarp模板01
HTML
<header> <div class="container"> <div class="row"> <div class="col-md-3 col-sm-4 col-xs-12"> <p> <i class="fa fa-phone"></i> <span>Phone</span> 010-020-0340 </p> </div> <div class="col-md-3 col-sm-4 col-xs-12"> <p> <i class="fa fa-envelope-o"></i> <span>Email</span> <a href="#">bluesQian@qw.com</a> </p> </div> <div class="col-md-5 col-sm-4 col-xs-12"> <ul class="social-icon"> <li><span>Meet us on</span></li> <li><a href="#" class="fa fa-facebook"></a></li> <li><a href="#" class="fa fa-twitter"></a> </li> <li><a href="#" class="fa fa-instagram"></a> </li> <li><a href="#" class="fa fa-apple"></a> </li> </ul> </div> </div> </div> </header> <nav class="navbar navbar-default" role="navigation" style="border-radius: 0;"> <div class="container"> <div class="navbar-header"> <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon icon-bar"></span> <span class="icon icon-bar"></span> <span class="icon icon-bar"></span> </button> <a href="#" class="navbar-brand">Admin</a> </div> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav navbar-right"> <li><a href="#top" class="current">HOME</a></li> <li><a href="#about">ABOUT</a></li> <li><a href="#team">TEAM</a></li> <li><a href="#service">SERVICE</a></li> <li><a href="#portfolio">PORTFOLIO</a></li> <li><a href="#contact">CONTACT</a></li> </ul> </div> </div> </nav> <section id="home"> <div class="container"> <div class="row"> <div class="col-md-offset-2 col-md-8"> <h1 class="wow fadeIn animated" style="visibility: visible; animation-delay: 0.9s; animation-name: fadeIn;"> We make templates that are <span>awesome</span></h1> <a data-scroll="" href="#about" class="btn btn-default" style="visibility: visible; animation-delay: 0.6s; animation-name: fadeInUp;"> GET STARTED</a> </div> </div> </div> </section> <section id="about"> <div class="container"> <div class="row"> <div class="col-md-12"> <h2>WE ARE <span>AWESOME</span></h2> </div> <div class="col-md-4 col-sm-4 col-xs-12"> <div class="media"> <div class="media-heading-wrapper"> <div class="media-object pull-left"> <i class="fa fa-mobile"></i> </div> <h3 class="media-heading">FULLY RESPONSIVE</h3> </div> <div class="media-body"> <p>Awesome responsive template is provided by <a rel="nofollow" href="http://www.templatemo.com" target="_parent">templatemo</a> website. This is Bootstrap v3.3.2 layout built on HTML5 CSS3. You can use this for any purpose. Please tell your friends about it.</p> </div> </div> </div> <div class="col-md-4 col-sm-4 col-xs-12"> <div class="media"> <div class="media-heading-wrapper"> <div class="media-object pull-left"> <i class="fa fa-comment-o"></i> </div> <h3 class="media-heading">FULLY RESPONSIVE</h3> </div> <div class="media-body"> <p>Awesome responsive template is provided by <a rel="nofollow" href="http://www.templatemo.com" target="_parent">templatemo</a> website. This is Bootstrap v3.3.2 layout built on HTML5 CSS3. You can use this for any purpose. Please tell your friends about it.</p> </div> </div> </div> <div class="col-md-4 col-sm-4 col-xs-12"> <div class="media"> <div class="media-heading-wrapper"> <div class="media-object pull-left"> <i class="fa fa-html5"></i> </div> <h3 class="media-heading">FULLY RESPONSIVE</h3> </div> <div class="media-body"> <p>Awesome responsive template is provided by <a rel="nofollow" href="http://www.templatemo.com" target="_parent">templatemo</a> website. This is Bootstrap v3.3.2 layout built on HTML5 CSS3. You can use this for any purpose. Please tell your friends about it.</p> </div> </div> </div> </div> </div> </section> <section id="team"> <div class="container"> <div class="row"> <div class="col-md-12"> <h2> <span>Bootstrap</span> Team </h2> </div> <div class="col-md-3 col-sm-6 col-xs-12"> <div class="team-wrapper"> <img src="images/team-img1.jpg" class="img-responsive" alt="team img 2"> <div class="team-des"> <h4>MARY</h4> <span>Developer</span> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elitquisque tempus ac eget diam et laoreet phasellus ut nisi id leo molest.</p> </div> </div> </div> <div class="col-md-3 col-sm-6 col-xs-12"> <div class="team-wrapper"> <img src="images/team-img2.jpg" class="img-responsive" alt="team img 2"> <div class="team-des"> <h4>MARY</h4> <span>Developer</span> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elitquisque tempus ac eget diam et laoreet phasellus ut nisi id leo molest.</p> </div> </div> </div> <div class="col-md-3 col-sm-6 col-xs-12"> <div class="team-wrapper"> <img src="images/team-img3.jpg" class="img-responsive" alt="team img 2"> <div class="team-des"> <h4>MARY</h4> <span>Developer</span> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elitquisque tempus ac eget diam et laoreet phasellus ut nisi id leo molest.</p> </div> </div> </div> <div class="col-md-3 col-sm-6 col-xs-12"> <div class="team-wrapper"> <img src="images/team-img4.jpg" class="img-responsive" alt="team img 2"> <div class="team-des"> <h4>MARY</h4> <span>Developer</span> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elitquisque tempus ac eget diam et laoreet phasellus ut nisi id leo molest.</p> </div> </div> </div> </div> </div> </section> <section id="service"> <div class="container"> <div class="row"> <div class="col-md-12"> <h2> OUR<span>Bootstrap</span>THIS </h2> </div> <div class="col-md-4 active"> <i class="fa fa-laptop"></i> <h4>Web Design</h4> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elitquisque tempus ac eget diam et laoreet phasellus ut nisi id leo molestie. Adipiscing vitae vel quam proin eget mauris eget. Lorem ipsum dolor sit amet, consectetur adipiscing elitquisque tempus ac eget diam et laoreet phasellus ut nisi id leo molestie. </p> </div> <div class="col-md-4 active"> <i class="fa fa-cloud"></i> <h4>Web Design</h4> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elitquisque tempus ac eget diam et laoreet phasellus ut nisi id leo molestie. Adipiscing vitae vel quam proin eget mauris eget. Lorem ipsum dolor sit amet, consectetur adipiscing elitquisque tempus ac eget diam et laoreet phasellus ut nisi id leo molestie. </p> </div> <div class="col-md-4 active"> <i class="fa fa-cog"></i> <h4>Web Design</h4> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elitquisque tempus ac eget diam et laoreet phasellus ut nisi id leo molestie. Adipiscing vitae vel quam proin eget mauris eget. Lorem ipsum dolor sit amet, consectetur adipiscing elitquisque tempus ac eget diam et laoreet phasellus ut nisi id leo molestie. </p> </div> </div> </div> </section> <section id="contact"> <div class="container"> <div class="row"> <div class="col-md-12"> <h2>CONTACT <span>AWESOME</span></h2> </div> <div class="col-md-6 col-sm-6 col-xs-12"> <form> <label>NAME</label> <input name="fullname" type="text" class="form-control" id="fullname"> <label>EMAIL</label> <input name="email" type="email" class="form-control" id="email"> <label>MESSAGE</label> <textarea name="message" rows="4" class="form-control" id="message"></textarea> <input type="submit" class="form-control"> </form> </div> <div class="col-md-6 col-sm-6 col-xs-12"> <address> <p class="address-title">OUR ADDRESS</p> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elitquisque tempus ac eget diam et laoreet phasellus ut nisi id leo molestie.</span> <p><i class="fa fa-phone"></i> 010-020-0340</p> <p><i class="fa fa-envelope-o"></i> awesome@company.com</p> <p><i class="fa fa-map-marker"></i> 663 New Walk Roadside, Birdeye View, GO 11020</p> </address> <ul class="social-icon"> <li><h4>WE ARE SOCIAL</h4></li> <li><a href="#" class="fa fa-facebook"></a></li> <li><a href="#" class="fa fa-twitter"></a></li> <li><a href="#" class="fa fa-instagram"></a></li> </ul> </div> </div> </div> </section> <footer id="copyright"> <div class="container"> <div class="row"> <div class="col-md-12 text-center"> <p> Copyright © BluesQian </p> </div> </div> </div> </footer>
CSS
body { background: #303030; color: #ffffff; font-family: 'Open Sans', sans-serif; font-weight: 300; overflow-x: hidden; margin: 0;padding: 0; } header { min-height: 20px; padding-top: 18px; padding-bottom: 10px; } p { margin: 0 0 10px; } header .fa { color: #28a7e9; } header span { font-weight: bold; padding-right: 10px; padding-left: 4px; } header a { color: #999; font-weight: 600; } header .social-icon { text-align: right; } .social-icon { position: relative; padding: 0; margin: 0; } .social-icon { position: relative; padding: 0; margin: 0; } .social-icon{ list-style-type: none; } .social-icon li { display: inline-block; list-style: none; padding-right: 5px; } header .social-icon li a { border: none; width: 20px; height: 20px; line-height: 20px; text-align: center; text-decoration: none; } header .social-icon li .fa { color: #FFFFFF; } #home { background: url(./images/home-bg.jpg) no-repeat; background-size: cover; padding-top: 160px; padding-bottom: 100px; min-height: 650px; } #home h1 span { color: #28a7e9; font-weight: bold; } #home .btn { background: transparent; border-radius: 2px; color: #fff; font-size: 16px; font-weight: bold; margin-top: 20px; width: 180px; height: 60px; padding-top: 18px; -webkit-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; } h2 span { color: #28a7e9; padding: 0 10px 0 10px; font-weight: bold; } #about h2 { text-align: center; font-size: 40px; padding-bottom: 40px; } #about .media-heading-wrapper { padding-bottom: 32px; } #about .media-heading-wrappe .pull-left { float: left; } #about .media-heading-wrapper .fa { border: 1px solid #fff; border-radius: 2px; color: #fff; font-size: 24px; width: 60px; height: 60px; line-height: 60px; text-align: center; margin-bottom: 20px; margin-right: 20px; } #about .media-heading-wrapper h3 { font-size: 18px; font-weight: bold; padding-top: 20px; padding-left: 52px; } #team, #service, #portfolio, #contact { padding-top: 60px; padding-bottom: 40px; } h2 { text-align: center; font-size: 40px; padding-bottom: 40px; padding-top: 40px; text-transform: uppercase; } #team .team-wrapper { background: #404040; padding-bottom: 10px; -webkit-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; position: relative; } #team .team-wrapper img{ max-width: 100%; max-height: 100%; } #team .team-wrapper .team-des { padding: 20px; } #team .team-wrapper .team-des h4 { font-size: 18px; } #team .team-wrapper .team-des span { color: #28a7e9; display: block; font-weight: bold; padding-bottom: 12px; } #service .fa { border: 1px solid #fff; border-radius: 2px; color: #fff; font-size: 50px; width: 100px; height: 100px; line-height: 100px; text-align: center; } #service h4 { color: #28a7e9; font-weight: 600; padding-top: 10px; padding-bottom: 14px; } #service .active { background: #505050; padding: 40px; } h4 { font-size: 18px; } #contact label { font-weight: 500; } #contact .form-control { background: transparent; border: 1px solid #28a7e9; border-radius: 2px; box-shadow: none; color: #fff; margin-top: 6px; margin-bottom: 16px; } #contact address { border-bottom: 1px solid #505050; padding-top: 30px; } #contact address .address-title { font-weight: bold; font-size: 20px; padding-bottom: 10px; } #contact address span { display: block; padding-bottom: 30px; } #contact address .fa { border: 1px solid #fff; border-radius: 2px; width: 40px; height: 40px; line-height: 40px; text-align: center; margin-right: 10px; margin-bottom: 10px; } .social-icon { position: relative; padding: 0; margin: 0; } .social-icon h4 { display: inline-block; padding-right: 20px; } .social-icon li a { border: 1px solid #fff; border-radius: 2px; color: #fff; width: 40px; height: 40px; line-height: 40px; text-align: center; text-decoration: none; -webkit-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; margin-right: 10px; } #copyright{ background-color: #000000; padding: 15px; } #copyright p { font-weight: 400; }
效果:
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步