绿色欧美样式bootstrap杯子订制图案网页模板代码下载



如需定制开发(网站开发、二次开发)在线咨询,请点击>> QQ:753511799

34 132 45



模板描述:绿色 欧美 bootstrap 杯子订制图案 网页模板 代码下载。绿色欧美样式bootstrap杯子订制图案网页模板代码下载HTML模板下载

代码结构

1. 引入CSS

<link href="css/bootstrap.css" type="text/css" rel="stylesheet" media="all">
<link href="css/portfolio.css" type="text/css" rel="stylesheet" media="all">
<link href="css/style.css" type="text/css" rel="stylesheet" media="all">
<link href="css/font-awesome.css" rel="stylesheet">
<link href="http://fonts.googleapis.com/css?family=Abril+Fatface" rel="stylesheet">
<link href="http://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i" rel="stylesheet">

2. 引入JS

<script src="js/jquery-2.2.3.min.js"></script>
<script src="js/responsiveslides.min.js"></script>
<script src="js/jquery.picEyes.js"></script>
<script src="js/counter.js"></script>
<script src="js/move-top.js"></script>
<script src="js/easing.js"></script>
<script src="js/SmoothScroll.min.js"></script>
<script src="js/bootstrap.js"></script>

3. HTML代码

    <!-- header -->
        <header class="main-header">
            <div class="container">
                <div class="row">
                    <div class="col-lg-3 d-flex align-items-center justify-content-center">
                        <h1>
                            <a class="navbar-brand" href="index.html">
                                Cafe
                            </a>
                        </h1>
                    </div>
                    <div class="col-lg-9 header-bottom-wthree">
                        <div class="d-md-flex justify-content-lg-end justify-content-center header-right">
                            <ul class="social-icons">
                                <li>
                                    <a href="#">
                                        <span class="fa fa-facebook-f"></span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <span class="fa fa-twitter"></span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <span class="fa fa-google-plus" aria-hidden="true"></span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <span class="fa fa-linkedin" aria-hidden="true"></span>
                                    </a>
                                </li>
                            </ul>
                            <div class="right_nav">
                                <button type="button" class="btn  wthree-link-bnr bg-transparent text-secondary"
                                    data-toggle="modal" aria-pressed="false" data-target="#exampleModal">login
                                </button>
                                <button type="button" class="btn  ml-2 wthree-link-bnr" data-toggle="modal" data-target="#exampleModal1">register</button>
                            </div>
                        </div>
                        <nav class="navbar second navbar-expand-lg navbar-light">
                            <button class="navbar-toggler mx-auto mt-lg-0 mt-sm-4" type="button" data-toggle="collapse"
                                data-target=".navbar-toggle" aria-controls="navbarNavAltMarkup1" aria-expanded="false"
                                aria-label="Toggle navigation">
                                <span class="navbar-toggler-icon"></span>
                            </button>
                            <div class="collapse navbar-collapse navbar-toggle" id="navbarNavAltMarkup1">
                                <div class="navbar-nav secondfix ml-lg-auto">
                                    <ul class="navbar-nav text-center">
                                        <li class="nav-item active  mr-lg-3">
                                            <a class="nav-link" href="index.html">Home
                                                <span class="sr-only">(current)</span>
                                            </a>
                                        </li>
                                        <li class="nav-item   mr-lg-3">
                                            <a class="nav-link scroll" href="#about">about</a>
                                        </li>
                                        <li class="nav-item   mr-lg-3">
                                            <a class="nav-link scroll" href="#why">why us?</a>
                                        </li>
                                        <li class="nav-item   mr-lg-3">
                                            <a class="nav-link scroll" href="#services">services</a>
                                        </li>
                                        <li class="nav-item   mr-lg-3">
                                            <a class="nav-link scroll" href="#portfolio">portfolio</a>
                                        </li>
                                        <li class="nav-item dropdown mr-lg-3">
                                            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
                                                data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                Dropdown
                                            </a>
                                            <div class="dropdown-menu text-lg-left text-center" aria-labelledby="navbarDropdown">
                                                <a class="dropdown-item nav-link scroll" href="#stats">Explore</a>
                                                <a class="dropdown-item nav-link scroll" href="#team">team</a>
                                                <a class="dropdown-item nav-link scroll" href="#testi">testimonials</a>
                                            </div>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link scroll" href="#contact">contact</a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </nav>
                    </div>
                </div>
            </div>
        </header>
    <!-- //header -->
    <!-- banner -->
    <div class="banner">
        <div class="container">
            <div class="banner-text">
                <h3>Begin The Day With Great Taste
                </h3>
                <p>Lorem ipsum dolor sit amet,sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
                    aliquyam erat, At vero eos et accusam et justo duo </p>
                <div class="d-flex justify-content-center mt-sm-5 mt-3">
                    <a href="#about" class="text-capitalize serv_link btn bg-theme  scroll">explore now</a>
                </div>
            </div>
        </div>
    </div>
    <!-- //banner -->
    <!-- about  -->
    <section class="offer-wthree py-lg-5 py-3" id="about">
        <div class="container  py-sm-5">
            <div class="title-w3ls text-center">
                <span class="sub-title">add your caption here</span>
                <h4 class="w3pvt-title">welcome to cafe
                </h4>
            </div>
            <div class="row head-row-home text-center">
                <div class="col-lg-10 mx-auto">
                    <div class="row">
                        <div class="col-lg-4 col-sm-6 my-sm-4 mt-4">
                            <div class="home-grid">
                                <span class="num-title">01</span>
                                <h4 class="home-title my-3">why choose us</h4>
                                <p> Pellentesque in ipsum id orci porta dapibus roined magna orem ipsum dolor sit
                                    ame.</p>
                                <a href="#" class="btn wthree-bnr-btn">Read more</a>
                            </div>
                        </div>
                        <div class="col-lg-4 col-sm-6 my-4">
                            <div class="home-grid">
                                <span class="num-title">02</span>
                                <h4 class="home-title my-3">what we do</h4>
                                <p> Pellentesque in ipsum id orci porta dapibus roined magna orem ipsum dolor sit
                                    ame.</p>
                                <a href="#team" class="btn wthree-bnr-btn scroll">Read more</a>
                            </div>
                        </div>
                        <div class="col-lg-4 col-sm-6 my-lg-4 mb-4 mx-auto">
                            <div class="home-grid">
                                <span class="num-title">03</span>
                                <h4 class="home-title my-3">explore Cafe</h4>
                                <p> Pellentesque in ipsum id orci porta dapibus roined magna orem ipsum dolor sit
                                    ame.</p>
                                <a href="#portfolio" class="btn wthree-bnr-btn scroll">Read more</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- //about -->
    <!-- about bottom -->
    <div class="abt_bottom py-lg-5 bg-theme">
        <div class="container py-sm-4 py-3">
            <div class="clearfix">
                <h4 class="abt-text text-capitalize text-white float-md-left">Experience The Ultimate Coffee</h4>
                <a href="#portfolio" class="text-capitalize scroll serv_link btn bg-theme2 float-md-right">our work</a>
            </div>
        </div>
    </div>
    <!-- //about bottom -->
    <!-- about-->
    <section class="wthree-row py-sm-5" id="why">
        <div class="container py-lg-5">
            <div class="row abbot-main py-lg-5 py-4">
                <div class="col-lg-6 abbot-right mt-lg-0 mt-3">
                    <img src="images/a.jpg" class="img-fluid img-thumbnail" alt="" />
                </div>
                <div class="col-lg-6 about-text-grid">
                    <span class="sub-title">add your caption here</span>
                    <h4 class="w3pvt-title">ornare auctor
                    </h4>
                    <p class="mt-3">Donec mi nulla, auctor nec sem a, ornare auctor mi. Sed mi tortor,
                        commodo a felis in, fringilla tincidunt nulla. Vestibulum
                        volutpat non eros ut vulpuuctor nec sem a, ornare auctor mi. Sed mi tortor, commodo a felis
                        in, fringilla tincidunt
                        nulla. Vestibulum volutpat non eros uttate.</p>
                    <p class="my-4">
                        Vestibulum volutpat non eros ut vulputate. Nunc id risus accumsan Donec mi nulla, auctor
                        nec sem a, ornare auctor mi. Sed
                        mi tortor, commodo a felis in, fringilla tincidunt nulla.</p>
                    <a href="#portfolio" class="text-capitalize serv_link btn bg-theme scroll">view more</a>
                </div>
            </div>
        </div>
    </section>
    <!-- //about -->
    <!-- stats -->
    <section class="w3_stats py-sm-5" id="stats">
        <div class="container">
            <div class="py-lg-5 w3-stats">
                <h5 class="w3pvt-title">why we are unique? have a look.
                </h5>
                <p class="my-4 text-white">
                    Vestibulum volutpat non eros ut vulputate. Nunc id risus accumsan Donec mi nulla, auctor
                    nec sem a, ornare auctor mi. Sed
                    mi tortor, commodo a felis in, fringilla tincidunt nulla.</p>
                <div class="row py-4">
                    <div class="col-lg-4 col-6">
                        <div class="counter">
                            <span class="fa fa-smile-o"></span>
                            <div class="timer count-title count-number mt-2 text-white" data-to="5100" data-speed="1500"></div>
                            <p class="count-text text-uppercase text-white">happy customers</p>
                        </div>
                    </div>
                    <div class="col-lg-4 col-6">
                        <div class="counter">
                            <span class="fa fa-users"></span>
                            <div class="timer count-title count-number mt-2 text-white" data-to="971" data-speed="1500"></div>
                            <p class="count-text text-uppercase text-white">master chef's</p>
                        </div>
                    </div>
                    <div class="col-lg-4 col-6  mx-auto">
                        <div class="counter">
                            <span class="fa fa-database"></span>
                            <div class="timer count-title count-number mt-2 text-white" data-to="21" data-speed="1500"></div>
                            <p class="count-text text-uppercase text-white">branches</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- //stats -->
    <!-- services-->
    <section class="wthree-row py-sm-5 " id="services">
        <div class="container">
            <div class="py-lg-5 py-4">
                <div class="img-grid-btm text-center">
                    <span class="sub-title">add your caption here</span>
                    <h4 class="w3pvt-title">more info
                    </h4>
                    <div class="row">
                        <div class="col-lg-10 mx-auto">
                            <p class="my-4">
                                Vestibulum volutpat non eros ut vulputate. Nunc id risus accumsan Donec mi nulla,
                                auctor
                                nec sem a, ornar eros ut vulputate. Nunc id risus accumsan Donec me auctor.</p>
                            <ul class="img-grid-list row">
                                <li class="col-sm-3 col-6">
                                    <span class="fa fa-ravelry" aria-hidden="true"></span>
                                    <h5>non eros<sup>1</sup></h5>
                                    <p>auctor nec sem</p>
                                </li>
                                <li class="col-sm-3 col-6">
                                    <span class="fa fa-language" aria-hidden="true"></span>
                                    <h5>accumsan<sup>2</sup></h5>
                                    <p>auctor nec sem</p>
                                </li>
                                <li class="col-sm-3 col-6">
                                    <span class="fa fa-wpexplorer" aria-hidden="true"></span>
                                    <h5>volutpat<sup>3</sup></h5>
                                    <p>auctor nec sem</p>
                                </li>
                                <li class="col-sm-3 col-6">
                                    <span class="fa fa-houzz" aria-hidden="true"></span>
                                    <h5>ornare<sup>4</sup></h5>
                                    <p>auctor nec sem</p>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <hr>
                <div class="row pt-lg-5">
                    <div class="col-lg-6 about-text-grid">
                        <h6 class="sub-title">heading goes here</h6>
                        <p class="mt-3">Donec mi nulla, aucto nulla auctr nec sem a.</p>
                        <ul class="my-4 list-head">
                            <li>
                                <span class="fa fa-check-circle-o mr-3" aria-hidden="true"></span>Cras justo odio</li>
                            <li>
                                <span class="fa fa-check-circle-o mr-3"></span>Dapibus ac facilisis in</li>
                            <li>
                                <span class="fa fa-check-circle-o mr-3"></span>Morbi leo risus</li>
                            <li>
                                <span class="fa fa-check-circle-o mr-3"></span>Porta ac consectetur ac</li>
                            <li>
                                <span class="fa fa-check-circle-o  mr-3"></span>Vestibulum at eros</li>
                        </ul>
                        <a href="#contact" class="scroll text-capitalize serv_link btn bg-theme2">contact us</a>
                    </div>
                    <div class="offset-lg-1 col-lg-5 abbot-right mt-lg-0 mt-4">
                        <img src="images/g4.jpg" class="img-fluid rounded" alt="" />
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- //features -->
    <!-- portfolio -->
    <section class="portfolio-wthree align-w3" id="portfolio">
        <div class="container-fluid">
            <div class="title-w3ls text-center">
                <span class="sub-title">add your caption here</span>
                <h4 class="w3pvt-title">our Portfolio
                </h4>
            </div>
            <div class="pb-lg-5 pb-sm-4">
                <ul class="demo row">
                    <li class="col-lg-4">
                        <div class="img-grid">
                            <div class="Portfolio-grid1">
                                <img src="images/g1.jpg" alt=" " class="img-fluid" />
                            </div>
                            <div class="port-desc text-center">
                                <h6 class="main-title-w3pvt text-center">Some Description</h6>
                                <p> Lorem ipsum dolor sit amet,Stet clita kasd gubergren, sed diam voluptua. sed
                                    diam
                                    nonumy eirmod tempor invidunt ut.
                                </p>
                            </div>
                        </div>
                    </li>
                    <li class="col-lg-4">
                        <div class="img-grid">
                            <div class="Portfolio-grid1">
                                <img src="images/g2.jpg" alt=" " class="img-fluid" />
                            </div>
                            <div class="port-desc text-center">
                                <h6 class="main-title-w3pvt text-center">Some Description</h6>
                                <p> Lorem ipsum dolor sit amet,Stet clita kasd gubergren, sed diam voluptua. sed
                                    diam
                                    nonumy eirmod tempor invidunt ut.
                                </p>
                            </div>
                        </div>
                    </li>
                    <li class="col-lg-4">
                        <div class="img-grid">
                            <div class="Portfolio-grid1">
                                <img src="images/g3.jpg" alt=" " class="img-fluid" />
                            </div>
                            <div class="port-desc text-center">
                                <h6 class="main-title-w3pvt text-center">Some Description</h6>
                                <p> Lorem ipsum dolor sit amet,Stet clita kasd gubergren, sed diam voluptua. sed
                                    diam
                                    nonumy eirmod tempor invidunt ut.
                                </p>
                            </div>
                        </div>
                    </li>
                    <li class="col-lg-4">
                        <div class="img-grid">
                            <div class="Portfolio-grid1">
                                <img src="images/g4.jpg" alt=" " class="img-fluid" />
                            </div>
                            <div class="port-desc text-center">
                                <h6 class="main-title-w3pvt text-center">Some Description</h6>
                                <p> Lorem ipsum dolor sit amet,Stet clita kasd gubergren, sed diam voluptua. sed
                                    diam
                                    nonumy eirmod tempor invidunt ut.
                                </p>
                            </div>
                        </div>
                    </li>
                    <li class="col-lg-4">
                        <div class="img-grid">
                            <div class="Portfolio-grid1">
                                <img src="images/g5.jpg" alt=" " class="img-fluid" />
                            </div>
                            <div class="port-desc text-center">
                                <h6 class="main-title-w3pvt text-center">Some Description</h6>
                                <p> Lorem ipsum dolor sit amet,Stet clita kasd gubergren, sed diam voluptua. sed
                                    diam
                                    nonumy eirmod tempor invidunt ut.
                                </p>
                            </div>
                        </div>
                    </li>
                    <li class="col-lg-4">
                        <div class="img-grid">
                            <div class="Portfolio-grid1">
                                <img src="images/g6.jpg" alt=" " class="img-fluid" />
                            </div>
                            <div class="port-desc text-center">
                                <h6 class="main-title-w3pvt text-center">Some Description</h6>
                                <p> Lorem ipsum dolor sit amet,Stet clita kasd gubergren, sed diam voluptua. sed
                                    diam
                                    nonumy eirmod tempor invidunt ut.
                                </p>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </section>
    <!-- //portfolio -->
    <!-- team  -->
    <section class="pb-sm-5 py-4 team-agile" id="team">
        <div class="container py-md-5">
            <div class="title-w3ls text-center">
                <span class="sub-title">add your caption here</span>
                <h4 class="w3pvt-title">our team
                </h4>
            </div>
            <div class="d-flex team-agile-row pt-sm-5 pt-3">
                <div class="col-lg-4 col-md-6">
                    <div class="box20">
                        <img src="images/t2.jpg" alt="" class="img-fluid" />
                        <div class="box-content">
                            <h3 class="title">willimson</h3>
                            <span class="post">Designation</span>
                        </div>
                        <ul class="icon">
                            <li>
                                <a href="#">
                                    <span class="fa fa-plus"></span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <span class="fa fa-link"></span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6 mt-md-0 mt-4">
                    <div class="box20">
                        <img src="images/t3.jpg" alt="" class="img-fluid" />
                        <div class="box-content">
                            <h3 class="title">Kristiana</h3>
                            <span class="post">Designation</span>
                        </div>
                        <ul class="icon">
                            <li>
                                <a href="#">
                                    <span class="fa fa-plus"></span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <span class="fa fa-link"></span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6 mt-lg-0 mt-4 mx-auto">
                    <div class="box20">
                        <img src="images/t1.jpg" alt="" class="img-fluid" />
                        <div class="box-content">
                            <h3 class="title">franklin</h3>
                            <span class="post">Designation</span>
                        </div>
                        <ul class="icon">
                            <li>
                                <a href="#">
                                    <span class="fa fa-plus"></span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <span class="fa fa-link"></span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- //team -->
    <!-- testimonials -->
    <div class="testimonials py-lg-5" id="testi">
        <div class="container py-5">
            <div class="title-section pb-4 text-center">
                <span class="sub-title text-white">add your caption here</span>
                <h4 class="w3pvt-title text-white">testimonials
                </h4>
            </div>
            <div class="text-center py-lg-5 pt-4">
                <div class="callbacks_container">
                    <ul class="rslides" id="slider3">
                        <li>
                            <div class="testi-pos">
                                <img src="images/ts1.jpg" alt="" class="img-fluid rounded-circle mb-3" />
                            </div>
                            <div class="testi-w3layouts">
                                <p>
                                    <span class="fa fa-quote-left"></span>Vivamus magna justo, lacinia eget consectetur
                                    sed,
                                    convallis at tellus. Nulla
                                    quis lorem ut libero malesuada feugiat.Nulla quis lorem ut libero malesuada
                                    feugiat.
                                    <span class="fa fa-quote-right"></span>
                                </p>
                                <h4>arim john</h4>
                                <span class="text-white">congue leo</span>
                            </div>
                        </li>
                        <li>
                            <div class="testi-pos">
                                <img src="images/ts2.jpg" alt="" class="img-fluid rounded-circle mb-3" />
                            </div>
                            <div class="testi-w3layouts">
                                <p>
                                    <span class="fa fa-quote-left"></span>V.Nulla quis lorem ut libero malesuada
                                    feugiat.ivamus magna justo, lacinia eget consectetur
                                    sed,
                                    convallis at tellus. Nulla
                                    quis lorem ut libero malesuada feugiat
                                    <span class="fa fa-quote-right"></span>
                                </p>
                                <h4>john arim</h4>
                                <span class="text-white">lacinia eget</span>
                            </div>
                        </li>
                        <li>
                            <div class="testi-pos">
                                <img src="images/ts3.jpg" alt="" class="img-fluid rounded-circle mb-3" />
                            </div>
                            <div class="testi-w3layouts">
                                <p>
                                    <span class="fa fa-quote-left"></span>ulla quis lorem Vivamus magna justo, lacinia
                                    eget consectetur
                                    sed,
                                    convallis at tellus. Nulla
                                    quis lorem ut libero malesuada feugiat.Nut libero malesuada
                                    feugiat.
                                    <span class="fa fa-quote-right"></span>
                                </p>
                                <h4>john arim</h4>
                                <span class="text-white">Donec rutru</span>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!-- //testimonials -->
    <!-- contact -->
    <div class="contact-wthree pt-lg-5" id="contact">
        <div class="container pt-md-5 pt-4">
            <div class="text-center pb-4">
                <span class="sub-title">add your caption here</span>
                <h4 class="w3pvt-title">contact us</h4>
            </div>
            <div class="col-12 contact-left-w3layouts pt-md-4">
                <div class="w3layouts-contact-top text-center">
                    <p>1234k Avenue,Block-4,New York City.</p>
                    <hr>
                    <p>Donec mi nulla, auctor nec sem a, ornare auctor mi. Sed mi tortor, commodo a felis in,
                        fringilla
                        tincidunt
                        nulla. Vestibulum volutpat non eros ut vulpuuctor nec sem </p>
                </div>
            </div>
            <div class="row py-lg-5 py-sm-4 pt-4">
                <div class="col-12 mb-4">
                    <div class="text-center">
                        <h6 class="sub-title">send us a note</h6>
                    </div>
                    <hr>
                    <!-- register form grid -->
                    <div class="register-top1">
                        <form action="#" method="post" class="register-wthree">
                            <div class="form-group">
                                <div class="row">
                                    <div class="col-md-6">
                                        <label>
                                            First name
                                        </label>
                                        <input class="form-control" type="text" placeholder="Johnson" name="email"
                                            required="">
                                    </div>
                                    <div class="col-md-6 mt-md-0 mt-4">
                                        <label>
                                            Last name
                                        </label>
                                        <input class="form-control" type="text" placeholder="Kc" name="name" required="">
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="row">
                                    <div class="col-md-6">
                                        <label>
                                            Mobile
                                        </label>
                                        <input class="form-control" type="text" placeholder="xxxx xxxxx" name="email"
                                            required="">
                                    </div>
                                    <div class="col-md-6 mt-md-0 mt-4">
                                        <label>
                                            Email
                                        </label>
                                        <input class="form-control" type="email" placeholder="[email protected]" name="email"
                                            required="">
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="row">
                                    <div class="col-md-12">
                                        <label>
                                            Your message
                                        </label>
                                        <textarea placeholder="Type your message here" class="form-control"></textarea>
                                    </div>
                                </div>
                            </div>
                            <div class="row mt-3">
                                <div class="col-md-12">
                                    <button type="submit" class="btn btn-w3layouts btn-block  bg-theme text-white w-100 font-weight-bold text-uppercase">Send</button>
                                </div>
                            </div>
                        </form>
                    </div>
                    <!--  //register form grid ends here -->
                </div>
            </div>
        </div>
        <iframe src=""
            allowfullscreen></iframe>
    </div>
    <!-- //contact -->
    <!-- footer top -->
    <div class="footer-top py-lg-5 py-4">
        <div class="container">
            <div class="row">
                <div class="col-lg-4 mb-lg-0 mb-4">
                    <div class="social-icons">
                        <h5 class="footer-top-title">stay connected</h5>
                        <ul class="social-icons">
                            <li>
                                <a href="#">
                                    <span class="fa fa-facebook-f"></span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <span class="fa fa-twitter"></span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <span class="fa fa-google-plus" aria-hidden="true"></span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <span class="fa fa-linkedin" aria-hidden="true"></span>
                                </a>
                            </li>
                        </ul>
                        <div class="tags">
                            <h5 class="footer-top-title">tags</h5>
                            <ul class="mt-4">
                                <li>
                                    <a href="#" class="border">dfre</a>
                                </li>
                                <li>
                                    <a href="#" class="border">Gahydwq</a>
                                </li>
                                <li>
                                    <a href="#" class="border">qeers</a>
                                </li>
                                <li>
                                    <a href="#" class="border">hysert</a>
                                </li>
                                <li>
                                    <a href="#" class="border">hjwsa</a>
                                </li>
                                <li>
                                    <a href="#" class="border">nhyewq</a>
                                </li>
                                <li>
                                    <a href="#" class="border">njyra</a>
                                </li>
                                <li>
                                    <a href="#" class="border">laiuwa</a>
                                </li>
                                <li>
                                    <a href="#" class="border">loghw</a>
                                </li>
                                <li>
                                    <a href="#" class="border">mhyu</a>
                                </li>
                                <li>
                                    <a href="#" class="border">mojjs</a>
                                </li>
                                <li>
                                    <a href="#" class="border">suisq</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <h5 class="footer-top-title">latest posts</h5>
                    <ul class="post-links">
                        <li>
                            <a href="#">
                                Lorem ipsum dolor sit amet.Cras rutrum iaculis enim, non mattis.
                            </a>
                            <span class="fa fa-clock-o mr-3"></span> 3 hrs ago
                        </li>
                        <li>
                            <a href="#">
                                Lorem ipsum dolor sit amet.Cras rutrum iaculis enim, non mattis.
                            </a>
                            <span class="fa fa-clock-o mr-3"></span> 10 hrs ago
                        </li>
                        <li>
                            <a href="#">
                                Lorem ipsum dolor sit amet.Cras rutrum iaculis enim, non mattis.
                            </a>
                            <span class="fa fa-clock-o mr-3"></span> 22 hrs ago
                        </li>
                    </ul>
                </div>
                <div class="col-lg-4">
                    <h5 class="footer-top-title">contact information</h5>
                    <ul class="d-flex flex-column">
                        <li>
                            <span class="fa fa-home mr-3 text-white"></span>
                            <p class="d-inline text-white">+4667 Woodland, California 916-983-6577.</p>
                        </li>
                        <li class="my-3">
                            <span class="fa fa-envelope-open mr-3 text-white"></span>
                            <a href="https://www.51qianduan.com/">51前端</a>
                        </li>
                        <li>
                            <span class="fa fa-phone mr-3 text-white"></span>
                            <p class="d-inline text-white">+456 123 7890</p>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!-- //footer top -->
    <!-- footer -->
    <footer>
        <div class="container">
            <div class="row">
                <div class="col-lg-6 footer-logo mb-lg-0 mb-4 text-lg-left text-center">
                    <h2>
                        <a href="index.html">Cafe</a>
                    </h2>
                </div>
                <div class="col-lg-6 cpy-right text-lg-right text-center">
                    <p>Copyright &copy; 2019.Company name All rights reserved.<a href="https://www.51qianduan.com/">51前端</a></p>
                </div>
            </div>
        </div>
    </footer>
    <!-- //footer -->
    <!-- Login modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header bg-theme2">
                    <h5 class="modal-title" id="exampleModalLabel">Login</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form action="#" method="post">
                        <div class="form-group">
                            <label for="recipient-name" class="col-form-label">Username</label>
                            <input type="text" class="form-control border" placeholder="john mercy " name="Name" id="recipient-name"
                                required="">
                        </div>
                        <div class="form-group">
                            <label for="password" class="col-form-label">Password</label>
                            <input type="password" class="form-control border" placeholder="****" name="Password" id="password"
                                required="">
                        </div>
                        <div class="right-w3l">
                            <input type="submit" class="form-control border text-white bg-theme" value="Login">
                        </div>
                        <div class="row sub-w3l my-3">
                            <div class="col sub-w3layouts">
                                <input type="checkbox" id="brand1" value="">
                                <label for="brand1" class="text-secondary">
                                    <span></span>Remember me?</label>
                            </div>
                            <div class="col forgot-w3l text-right text-secondary">
                                <a href="#" class="text-white">Forgot Password?</a>
                            </div>
                        </div>
                        <p class="text-center text-secondary">Don't have an account?
                            <a href="#" data-toggle="modal" data-target="#exampleModal1" class="text-dark font-weight-bold">
                                Register Now</a>
                        </p>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!-- //Login modal -->
    <!-- Register modal -->
    <div class="modal fade" id="exampleModal1" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel1"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header  bg-theme2">
                    <h5 class="modal-title" id="exampleModalLabel1">Register</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form action="#" method="post">
                        <div class="form-group">
                            <label for="recipient-name" class="col-form-label">Username</label>
                            <input type="text" class="form-control border" placeholder="john mercy " name="Name" id="recipient-rname"
                                required="">
                        </div>
                        <div class="form-group">
                            <label for="recipient-email" class="col-form-label">Email</label>
                            <input type="email" class="form-control border" placeholder="[email protected]" name="Email"
                                id="recipient-email" required="">
                        </div>
                        <div class="form-group">
                            <label for="password1" class="col-form-label">Password</label>
                            <input type="password" class="form-control border" placeholder="****" name="Password" id="password1"
                                required="">
                        </div>
                        <div class="form-group">
                            <label for="password2" class="col-form-label">Confirm Password</label>
                            <input type="password" class="form-control border" placeholder="****" name="Confirm Password"
                                id="password2" required="">
                        </div>
                        <div class="sub-w3l">
                            <div class="sub-w3layouts">
                                <input type="checkbox" id="brand2" value="">
                                <label for="brand2" class="mb-3 text-secondary">
                                    <span></span>I Accept to the Terms & Conditions</label>
                            </div>
                        </div>
                        <div class="right-w3l">
                            <input type="submit" class="form-control bg-theme text-white" value="Register">
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!-- // Register modal -->
    <!-- js -->
    <!-- //js -->
    <!-- testimonials  Responsiveslides -->
    <script>
        // You can also use"$(window).load(function() {"
        $(function () {
            // Slideshow 4
            $("#slider3").responsiveSlides({
                auto: true,
                pager: true,
                nav: false,
                speed: 500,
                namespace: "callbacks",
                before: function () {
                    $('.events').append("<li>before event fired.</li>");
                },
                after: function () {
                    $('.events').append("<li>after event fired.</li>");
                }
            });
        });
    </script>
    <!-- //testimonials  Responsiveslides -->
    <!-- Portfolio -->
    <script>
        $(function () {
            //picturesEyes($('.demo li'));
            $('.demo li').picEyes();
        });
    </script>
    <!-- //Portfolio -->
    <!-- script for password match -->
    <script>
        window.onload = function () {
            document.getElementById("password1").onchange = validatePassword;
            document.getElementById("password2").onchange = validatePassword;
        }
        function validatePassword() {
            var pass2 = document.getElementById("password2").value;
            var pass1 = document.getElementById("password1").value;
            if (pass1 != pass2)
                document.getElementById("password2").setCustomValidity("Passwords Don't Match");
            else
                document.getElementById("password2").setCustomValidity('');
            //empty string means no validation error
        }
    </script>
    <!-- script for password match -->
    <!-- start-smooth-scrolling -->
    <script>
        jQuery(document).ready(function ($) {
            $(".scroll").click(function (event) {
                event.preventDefault();
                $('html,body').animate({
                    scrollTop: $(this.hash).offset().top
                }, 1000);
            });
        });
    </script>
    <!-- //end-smooth-scrolling -->
    <!-- smooth-scrolling-of-move-up -->
    <script>
        $(document).ready(function () {
            /*
            var defaults = {
                containerID: 'toTop', // fading element id
                containerHoverID: 'toTopHover', // fading element hover id
                scrollSpeed: 1200,
                easingType: 'linear' 
            };
            */
            $().UItoTop({
                easingType: 'easeOutQuart'
            });
        });
    </script>
    <!-- //smooth-scrolling-of-move-up -->
    <!-- Bootstrap core JavaScript
================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 扁平化 养生会馆 植物花草 宽屏全屏 游戏 黑色 bootstrap自适应 IT网络科技 蓝色 普通自适应 欧美风 旅游 红色 中国风 金融理财保险 绿色 韩系 高校 灰色 日系 简洁简约 工业产品 黄色 炫酷 家居装饰 紫色 卡通动画 橙色 招聘猎头 精美 实用通用 艺术创意 粉色 政府 婚庆 大气 白色 新闻资讯 婚纱摄影 棕色 清新 教育培训 彩色 绘画 设计 餐饮美食 其他风格 外贸 服装服饰 建筑 化工企业 医药器械 美容美发 动漫 电影视频 包装印刷 机械 汽车4S店 农业产品 咨询管理 酒店 健身房 化妆品 食品 花卉 房地产 协会组织 快递货运 数码电器 搬家 珠宝首饰 酒业 文化传媒 装修装饰 医院医疗 律师 酒吧音乐 图书 动物宠物 航空航天 股票 能源 公益 饮品 生活用品 家政保洁 体育 房屋租赁 商务 电力公司 打车租车 环保 宗教寺庙 工具文具 企业行业 自适应响应式 风格类型 颜色色彩

×
×
51前端

注册

×
绑定手机

请绑定手机号,在继续操作

×
单次下载支付

应付金额:279

支付完成后,回到下载页面,在进行下载

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到