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>
View Code

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;
}
View Code

效果

移动端

posted @ 2017-12-09 16:14  BluesQian  阅读(114)  评论(0)  编辑  收藏  举报