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



2 7 3



模板描述:绿色 欧美 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="example@email.com" 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="username@email.com" 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 bootstrap自适应 bootstrap响应式 pc+wap 移动+电脑 手机+电脑 绿色 简洁 简约 简单 大气 霸气 设计 设计公司

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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