绿色简洁风格响应式创意建筑设计企业网站模板



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

22 85 29



模板描述:绿色 简洁风格 响应式 创意建筑设计。整站宽屏满屏展示效果。鼠标移动在图片区域或者文字区域上有放大效果和展开效果。最底部部分带有自动反动和滚动效果,鼠标移动上之后,停止移动和滚动效果。适用创意建筑设计行业。同时兼容手机端和电脑网页端。

代码结构

1. 引入CSS

<link href="css/bootstrap.css" rel='stylesheet' type='text/css' />
<link href="css/examples.css" rel="stylesheet" type="text/css">
<link href="css/jquery.fancybox.css" rel="stylesheet" type="text/css">
<link href="css/slider-pro.css" rel='stylesheet' type='text/css' />
<link href="css/timeline.css" rel="stylesheet" type="text/css">
<link href="css/style.css" rel='stylesheet' type='text/css' />
<link href="css/fontawesome-all.css" rel="stylesheet">
<link href="http://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i" 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.sliderPro.min.js"></script>
<script src="js/jquery.fancybox.pack.js"></script>
<script src="js/timeline.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/move-top.js"></script>
<script src="js/easing.js"></script>

3. HTML代码

    <div class="main-sec" id="home">
        <header>
            <nav class="navbar navbar-expand-lg navbar-light shift">
                <div class="logo">
                    <h1>
                        <a class="navbar-brand" href="index.html">
                            <i class="fab fa-firstdraft"></i> Erection</a>
                    </h1>
                </div>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul class="navbar-nav mx-auto">
                        <li class="nav-item active">
                            <a class="nav-link" href="index.html">Home
                                <span class="sr-only">(current)</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="about.html">About</a>
                        </li>
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                Dropdown
                                <i class="fas fa-angle-down"></i>
                            </a>
                            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                                <a class="dropdown-item" href="services.html">Services</a>
                                <div class="dropdown-divider"></div>
                                <a class="dropdown-item" href="404.html">Error</a>
                            </div>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="projects.html">Projects</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="contact.html">Contact</a>
                        </li>
                    </ul>
                    <form action="#" method="post" class="form-inline my-2 my-lg-0 header-search">
                        <input class="form-control" type="search" placeholder="Search here..." name="Search" required="">
                        <button class="btn btn1 my-2 my-sm-0" type="submit">
                            <i class="fas fa-search"></i>
                        </button>
                    </form>
                </div>
            </nav>
        </header>
        <!--//header-->
    </div>
    <!-- banner-inner -->
    <!-- banner-text -->
    <div class="slider">
        <div class="callbacks_container">
            <ul class="rslides callbacks callbacks1" id="slider4">
                <li>
                    <div class="banner-top">
                        <div class="covering">
                            <div class="container">
                                <div class="w3layouts-banner-info text-center">
                                    <h3>We Construct your
                                        <span>Success</span>. </h3>
                                    <p>Architects with a different Approarch.</p>
                                    <a href="about.html" class="mr-2">Read More
                                        <i class="fa fa-caret-right" aria-hidden="true"></i>
                                    </a>
                                    <a href="contact.html">Contact Us
                                        <i class="fa fa-caret-right" aria-hidden="true"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="banner-top1">
                        <div class="covering">
                            <div class="container">
                                <div class="w3layouts-banner-info text-center">
                                    <h3>Architecture Designs and
                                        <span>Plans</span>
                                    </h3>
                                    <p>Architects with a different Approarch.</p>
                                    <a href="about.html" class="mr-2">Read More
                                        <i class="fa fa-caret-right" aria-hidden="true"></i>
                                    </a>
                                    <a href="contact.html">Contact Us
                                        <i class="fa fa-caret-right" aria-hidden="true"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="banner-top2">
                        <div class="covering">
                            <div class="container">
                                <div class="w3layouts-banner-info text-center">
                                    <h3>We Construct your
                                        <span>Success</span>. </h3>
                                    <p>Architects with a different Approarch.</p>
                                    <a href="about.html" class="mr-2">Read More
                                        <i class="fa fa-caret-right" aria-hidden="true"></i>
                                    </a>
                                    <a href="contact.html">Contact Us
                                        <i class="fa fa-caret-right" aria-hidden="true"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="banner-top3">
                        <div class="covering">
                            <div class="container">
                                <div class="w3layouts-banner-info text-center">
                                    <h3>Architecture Designs and
                                        <span>Plans</span>
                                    </h3>
                                    <p>Architects with a different Approarch.</p>
                                    <a href="about.html" class="mr-2">Read More
                                        <i class="fa fa-caret-right" aria-hidden="true"></i>
                                    </a>
                                    <a href="contact.html">Contact Us
                                        <i class="fa fa-caret-right" aria-hidden="true"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        <div class="clearfix"> </div>
        <!-- Social Icons -->
        <div class="social_media">
            <ul>
                <li>
                    <a href="#" class="facebook">
                        <i class="fab fa-facebook-f" aria-hidden="true"></i>
                    </a>
                </li>
                <li>
                    <a href="#" class="twitter">
                        <i class="fab fa-twitter" aria-hidden="true"></i>
                    </a>
                </li>
                <li>
                    <a href="#" class="dribbble">
                        <i class="fab fa-dribbble" aria-hidden="true"></i>
                    </a>
                </li>
                <li>
                    <a href="#" class="behance">
                        <i class="fab fa-behance" aria-hidden="true"></i>
                    </a>
                </li>
            </ul>
        </div>
        <!-- //Social Icons -->
        <!-- To bottom button-->
        <div class="thim-click-to-bottom">
            <div class="rotate">
                <a href="#about" class="scroll">
                    <i class="fas fa-ellipsis-v"></i>
                </a>
            </div>
        </div>
        <!-- //To bottom button-->
    </div>
    <!--//Slider-->
    <!--// banner-inner -->
    <!--/wthree-banner-bottom-->
    <section class="wthree-banner-bottom py-lg-5 py-3 text-center" id="about">
        <div class="container py-lg-4 py-3">
            <h3 class="tittle text-center mb-lg-4 mb-3">
                <span>Our Mission</span>About us</h3>
            <p class="para my-4">Lorem ipsum dolor sit amet consectetur adipisicing elit sedc dnmo eiusmod tempor incididunt ut labore et dolore magna aliqua uta enim ad minim ven iam quis nostrud exercitation.</p>
            <div class="about-info mt-lg-5 mt-3">
                <div class="row">
                    <div class="col-lg-6 ab-imgs">
                        <div class="row ab-inner-img">
                            <div class="col-md-6 ab-one">
                                <img src="images/ab1.jpg" class="img-fluid" alt="">
                            </div>
                            <div class="col-md-6 ab-one">
                                <img src="images/ab2.jpg" class="img-fluid" alt="">
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 ab-info text-left">
                        <div class="row ab-text-con">
                            <div class="col-sm-6 ab-grid">
                                <div class="card">
                                    <div class="card-body">
                                        <i class="fas fa-home"></i>
                                        <h5 class="card-title">Decoration</h5>
                                        <p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit sedc..</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6 ab-grid">
                                <div class="card">
                                    <div class="card-body">
                                        <i class="fas fa-compress"></i>
                                        <h5 class="card-title">Interior</h5>
                                        <p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit..</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6 ab-grid mt-4">
                                <div class="card">
                                    <div class="card-body">
                                        <i class="fas fa-pencil-alt"></i>
                                        <h5 class="card-title">Architecture</h5>
                                        <p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit..</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6 ab-grid mt-4">
                                <div class="card">
                                    <div class="card-body">
                                        <i class="far fa-building"></i>
                                        <h5 class="card-title">Construction</h5>
                                        <p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit..</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--//wthree-banner-bottom-->
    <section class="page-section py-lg-5 py-3">
        <div class="container-fluid">
            <div class="w3ls-inner-sec py-lg-4 py-3">
                <h3 class="tittle text-center mb-lg-5 mb-3">
                    <span>Timeline</span>Awards that we have</h3>
                <div class="timeline">
                    <div class="timeline__wrap">
                        <div class="timeline__items">
                            <div class="timeline__item">
                                <div class="timeline__content">
                                    <h4>2021</h4>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dignissim neque condimentum lacus dapibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dignissim neque condimentum lacus dapibus.</p>
                                </div>
                            </div>
                            <div class="timeline__item">
                                <div class="timeline__content">
                                    <h4>2015</h4>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dignissim neque condimentum lacus dapibus.</p>
                                </div>
                            </div>
                            <div class="timeline__item">
                                <div class="timeline__content">
                                    <h4>2014</h4>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dignissim neque condimentum lacus dapibus.</p>
                                </div>
                            </div>
                            <div class="timeline__item">
                                <div class="timeline__content">
                                    <h4>2012</h4>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dignissim neque condimentum lacus dapibus.</p>
                                </div>
                            </div>
                            <div class="timeline__item">
                                <div class="timeline__content">
                                    <h4>2010</h4>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dignissim neque condimentum lacus dapibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                                </div>
                            </div>
                            <div class="timeline__item">
                                <div class="timeline__content">
                                    <h4>2007</h4>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dignissim neque condimentum lacus dapibus.</p>
                                </div>
                            </div>
                            <div class="timeline__item">
                                <div class="timeline__content">
                                    <h4>2004</h4>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dignissim neque condimentum lacus dapibus.</p>
                                </div>
                            </div>
                            <div class="timeline__item">
                                <div class="timeline__content">
                                    <h4>2002</h4>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dignissim neque condimentum lacus dapibus.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--//timeline-->
    <!--/wthree-banner-bottom-->
    <section class="wthree-banner-bottom py-lg-5 py-3 text-center">
        <div class="container py-lg-4 py-3">
            <h3 class="tittle text-center mb-lg-5 mb-3">
                <span>Team</span>Experts ready to serve.</h3>
            <div class="row mt-5">
                <div class="col-lg-4 member-main-w3layouts text-center">
                    <div class="card">
                        <div class="card-body">
                            <div class="member-img">
                                <img src="images/team1.jpg" alt=" " class="img-fluid rounded-circle">
                            </div>
                            <div class="member-info text-center py-lg-4 py-2">
                                <h4>Mark Jackman</h4>
                                <p class="my-4"> Aenean orci erat, placerat id pulvinar nec, tincidunt vel eros.</p>
                                <div class="mt-3 team-social text-center">
                                    <ul class="social-icons text-center">
                                        <li>
                                            <a href="#">
                                                <i class="fab fa-facebook-f"></i>
                                            </a>
                                        </li>
                                        <li class="mx-3">
                                            <a href="#">
                                                <i class="fab fa-twitter"></i>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#">
                                                <i class="fab fa-google-plus-g"></i>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 member-main-w3layouts text-center">
                    <div class="card">
                        <div class="card-body">
                            <div class="member-img">
                                <img src="images/team2.jpg" alt=" " class="img-fluid rounded-circle">
                            </div>
                            <div class="member-info text-center py-lg-4 py-2">
                                <h4>Janet Levine</h4>
                                <p class="my-4">Aenean orci erat, placerat id pulvinar nec, tincidunt vel eros..
                                </p>
                                <div class="mt-3 team-social text-center">
                                    <ul class="social-icons text-center">
                                        <li>
                                            <a href="#">
                                                <i class="fab fa-facebook-f"></i>
                                            </a>
                                        </li>
                                        <li class="mx-3">
                                            <a href="#">
                                                <i class="fab fa-twitter"></i>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#">
                                                <i class="fab fa-google-plus-g"></i>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 member-main-w3layouts text-center">
                    <div class="card">
                        <div class="card-body">
                            <div class="member-img">
                                <img src="images/team3.jpg" alt=" " class="img-fluid rounded-circle">
                            </div>
                            <div class="member-info text-center py-lg-4 py-2">
                                <h4>Rene Rickman</h4>
                                <p class="my-4">Aenean orci erat, placerat id pulvinar nec, tincidunt vel eros..
                                </p>
                                <div class="mt-3 team-social text-center">
                                    <ul class="social-icons text-center">
                                        <li>
                                            <a href="#">
                                                <i class="fab fa-facebook-f"></i>
                                            </a>
                                        </li>
                                        <li class="mx-3">
                                            <a href="#">
                                                <i class="fab fa-twitter"></i>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#">
                                                <i class="fab fa-google-plus-g"></i>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 member-main-w3layouts text-center mt-lg-3 mt-2">
                    <div class="card">
                        <div class="card-body">
                            <div class="member-img">
                                <img src="images/team4.jpg" alt=" " class="img-fluid rounded-circle">
                            </div>
                            <div class="member-info text-center py-lg-4 py-2">
                                <h4>Daniele Norwich</h4>
                                <p class="my-4">Aenean orci erat, placerat id pulvinar nec, tincidunt vel eros..
                                </p>
                                <div class="mt-3 team-social text-center">
                                    <ul class="social-icons text-center">
                                        <li>
                                            <a href="#">
                                                <i class="fab fa-facebook-f"></i>
                                            </a>
                                        </li>
                                        <li class="mx-3">
                                            <a href="#">
                                                <i class="fab fa-twitter"></i>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#">
                                                <i class="fab fa-google-plus-g"></i>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 member-main-w3layouts text-center mt-lg-3 mt-2">
                    <div class="card">
                        <div class="card-body">
                            <div class="member-img">
                                <img src="images/team5.jpg" alt=" " class="img-fluid rounded-circle">
                            </div>
                            <div class="member-info text-center py-lg-4 py-2">
                                <h4>Thomas Muller</h4>
                                <p class="my-4">Aenean orci erat, placerat id pulvinar nec, tincidunt vel eros..
                                </p>
                                <div class="mt-3 team-social text-center">
                                    <ul class="social-icons text-center">
                                        <li>
                                            <a href="#">
                                                <i class="fab fa-facebook-f"></i>
                                            </a>
                                        </li>
                                        <li class="mx-3">
                                            <a href="#">
                                                <i class="fab fa-twitter"></i>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#">
                                                <i class="fab fa-google-plus-g"></i>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 member-main-w3layouts text-center mt-lg-3 mt-2">
                    <div class="card">
                        <div class="card-body">
                            <div class="member-img">
                                <img src="images/team6.jpg" alt=" " class="img-fluid rounded-circle">
                            </div>
                            <div class="member-info text-center py-lg-4 py-2">
                                <h4>Melissa Hoffman</h4>
                                <p class="my-4">Aenean orci erat, placerat id pulvinar nec, tincidunt vel eros..
                                </p>
                                <div class="mt-3 team-social text-center">
                                    <ul class="social-icons text-center">
                                        <li>
                                            <a href="#">
                                                <i class="fab fa-facebook-f"></i>
                                            </a>
                                        </li>
                                        <li class="mx-3">
                                            <a href="#">
                                                <i class="fab fa-twitter"></i>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#">
                                                <i class="fab fa-google-plus-g"></i>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--//wthree-banner-bottom-->
    <!--/news-->
    <section class="wthree-banner-bottom bg-light py-md-5 py-3">
        <div class="container">
            <div class="w3ls-inner-sec py-md-5 py-3">
                <h3 class="tittle text-center mb-lg-5 mb-3">
                    <span>Visit</span>Latest News</h3>
                <div class="row choose-main ">
                    <div class="col-lg-6 galsses-grid-right">
                        <h5>
                            <span class="post-color">21</span> May 2021</h5>
                        <h4 class="post my-3">Lorem ipsum dolor sit amet</h4>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit sedc dnmo eiusmod tempor incididunt ut consectetur adipisicing elit sedc labore et dolore magna aliqua uta enim ad minim.. </p>
                    </div>
                    <div class="col-lg-6 galsses-grid-right">
                        <div class="galsses-grid-left">
                            <figure class="effect-lexi">
                                <img src="images/p2.jpg" alt="" class="img-fluid">
                                <figcaption>
                                    <h3>Archite
                                        <span>cture</span>
                                    </h3>
                                    <p> Plans and Design..</p>
                                </figcaption>
                            </figure>
                        </div>
                    </div>
                </div>
                <div class="row choose-main my-lg-5 my-3">
                    <div class="col-lg-6 galsses-grid-right">
                        <div class="galsses-grid-left">
                            <figure class="effect-lexi">
                                <img src="images/p4.jpg" alt="" class="img-fluid">
                                <figcaption>
                                    <h3>Archite
                                        <span>cture</span>
                                    </h3>
                                    <p> Plans and Design..</p>
                                </figcaption>
                            </figure>
                        </div>
                    </div>
                    <div class="col-lg-6 galsses-grid-right mt-5">
                        <h5>
                            <span class="post-color">21</span> May 2021</h5>
                        <h4 class="post my-3">Lorem ipsum dolor sit amet</h4>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit sedc dnmo eiusmod tempor incididunt ut consectetur adipisicing elit sedc labore et dolore magna aliqua uta enim ad minim.. </p>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--//news-->
    <!--fancy-slider-->
    <section class="wthree-banner-bottom py-md-5 py-3">
        <div class="w3ls-inner-sec py-md-5 py-3">
            <h3 class="tittle text-center mb-lg-5 mb-3">
                <span>Visit</span>Our Featured Projects</h3>
            	<div id="example2" class="slider-pro">
                            <div class="sp-slides">
                                <div class="sp-slide">
                                    <a href="images/g1.jpg">
                                        <img class="sp-image" src="images/blank.gif" 
                                            data-src="images/g1.jpg" 
                                            data-retina="images/g1.jpg"/>
                                    </a>
                                   <p class="sp-caption">Add Some Description</p>
                                </div>
                                <div class="sp-slide">
                                   <a href="images/g2.jpg">
                                        <img class="sp-image" src="images/blank.gif" 
                                            data-src="images/g2.jpg" 
                                            data-retina="images/g2.jpg"/>
                                    </a>
                                    <p class="sp-caption">Add Some Description</p>
                                </div>
                                <div class="sp-slide">
                                    <a href="images/g3.jpg">
                                        <img class="sp-image" src="images/blank.gif" 
                                            data-src="images/g3.jpg" 
                                            data-retina="images/g3.jpg"/>
                                    </a>
                                   <p class="sp-caption">Add Some Description</p>
                                </div>
                                <div class="sp-slide">
                                     <a href="images/g4.jpg">
                                        <img class="sp-image" src="images/blank.gif" 
                                            data-src="images/g4.jpg" 
                                            data-retina="images/g4.jpg"/>
                                    </a>
                                   <p class="sp-caption">Add Some Description</p>
                                </div>
                                <div class="sp-slide">
                                     <a href="images/g5.jpg">
                                        <img class="sp-image" src="images/blank.gif" 
                                            data-src="images/g5.jpg" 
                                            data-retina="images/g5.jpg"/>
                                    </a>
                              <p class="sp-caption">Add Some Description</p>
                                </div>
                                <div class="sp-slide">
                                    <a href="images/g6.jpg">
                                        <img class="sp-image" src="images/blank.gif" 
                                            data-src="images/g6.jpg" 
                                            data-retina="images/g6.jpg"/>
                                    </a>
                                <p class="sp-caption">Add Some Description</p>
                                </div>
                                <div class="sp-slide">
                                     <a href="images/g7.jpg">
                                        <img class="sp-image" src="images/blank.gif" 
                                            data-src="images/g7.jpg" 
                                            data-retina="images/g7.jpg"/>
                                    </a>
                                  <p class="sp-caption">Add Some Description</p>
                                </div>
                                <div class="sp-slide">
                                   <a href="images/g5.jpg">
                                        <img class="sp-image" src="images/blank.gif" 
                                            data-src="images/g5.jpg" 
                                            data-retina="images/g5.jpg"/>
                                    </a>
                                   <p class="sp-caption">Add Some Description</p>
                                </div>
                            </div>
                        </div>
        </div>
    </section>
    <!--//fancy-slider-->
    <!-- /testimonials -->
    <div class="testimonials py-lg-5 py-3">
        <div class="testimonials-inner py-lg-5 py-3">
            <h3 class="tittle cen text-center my-lg-4 mt-3">Tesimonials</h3>
            <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
                <div class="carousel-inner" role="listbox">
                    <div class="carousel-item active">
                        <div class="testimonials_grid text-center">
                            <h3>Anamaria
                                <span>Customer</span>
                            </h3>
                            <label>United States</label>
                            <p>Maecenas interdum, metus vitae tincidunt porttitor, magna quam egestas sem, ac scelerisque nisl nibh vel lacus. Proin eget gravida odio. Donec ullamcorper est eu accumsan cursus.</p>
                        </div>
                    </div>
                    <div class="carousel-item">
                        <div class="testimonials_grid text-center">
                            <h3>Esmeralda
                                <span>Customer</span>
                            </h3>
                            <label>United States</label>
                            <p>Maecenas interdum, metus vitae tincidunt porttitor, magna quam egestas sem, ac scelerisque nisl nibh vel lacus. Proin eget gravida odio. Donec ullamcorper est eu accumsan cursus.</p>
                        </div>
                    </div>
                    <div class="carousel-item">
                        <div class="testimonials_grid text-center">
                            <h3>Gretchen
                                <span>Customer</span>
                            </h3>
                            <label>United States</label>
                            <p>Maecenas interdum, metus vitae tincidunt porttitor, magna quam egestas sem, ac scelerisque nisl nibh vel lacus. Proin eget gravida odio. Donec ullamcorper est eu accumsan cursus.</p>
                        </div>
                    </div>
                    <a class="carousel-control-prev test" href="#carouselExampleControls" role="button" data-slide="prev">
                        <span class="fas fa-long-arrow-alt-left"></span>
                        <span class="sr-only">Previous</span>
                    </a>
                    <a class="carousel-control-next test" href="#carouselExampleControls" role="button" data-slide="next">
                        <span class="fas fa-long-arrow-alt-right" aria-hidden="true"></span>
                        <span class="sr-only">Next</span>
                    </a>
                </div>
            </div>
        </div>
    </div>
    <!-- //testimonials -->
    <!-- /newsletter-->
    <div class="newsletter py-lg-5 py-3 text-center">
        <div class="newsletter-inner py-lg-5 py-3">
            <h3 class="tittle text-center mb-lg-5 mb-3">
                <span>Visit </span>Don't forget to Sign up</h3>
            <div class="newsright">
                <form action="#" method="post" class="d-flex">
                    <input class="form-control" type="email" placeholder="Enter your email..." name="email" required="">
                    <input class="form-control" type="submit" value="Subscribe">
                </form>
            </div>
        </div>
    </div>
    <!-- //newsletter-->
    <!--footer -->
    <footer class="footer-sec-w3layouts py-lg-5 py-3">
        <div class="container">
            <div class="w3ls-inner-sec py-lg-4 py-3">
                <div class="row">
                    <div class="col-lg-6 footer-left-info text-left">
                        <div class="logo">
                            <h2>
                                <a href="index.html">
                                    <i class="fab fa-firstdraft"></i> Erection</a>
                            </h2>
                        </div>
                        <p class="my-5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dignissim neque condimentum lacus dapibus.consectetur adipiscing elit. Integer dignissim neque condimentum lacus dapibus.</p>
                    </div>
                    <div class="col-lg-6 footer-right-info text-right">
                        <h6>Get In Touch</h6>
                        <address class="ad-info mt-5">
                            <strong>Twitter, Inc.</strong>
                            <br> 1355 Market St, Suite 900
                            <br> San Francisco, CA 94103
                            <br>
                            <abbr title="Phone">P:</abbr> (123) 456-7890
                        </address>
                    </div>
                </div>
                <div class="row copyright-info mt-3">
                    <div class="col-lg-6 copyright">
                        <p>更多模板 请关注模板之家<a target="_blank" href="http://sc.51qianduan.com/moban/">模板之家</a>
                        </p>
                    </div>
                    <div class="col-lg-6 social_media footer-icons text-right">
                        <ul class="text-right">
                            <li>
                                <a href="#" class="facebook text-center">
                                    <i class="fab fa-facebook-f" aria-hidden="true"></i>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="twitter text-center">
                                    <i class="fab fa-twitter" aria-hidden="true"></i>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="dribbble text-center">
                                    <i class="fab fa-dribbble" aria-hidden="true"></i>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="behance text-center">
                                    <i class="fab fa-behance" aria-hidden="true"></i>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </footer>
    <!-- //Custom-JavaScript-File-Links -->
    <!-- js -->
    <!--slider-->
    <!-- banner slider -->
    <script>
        $(function() {
            $("#slider4").responsiveSlides({
                auto: true,
                pager: true,
                nav: false,
                speed: 1000,
                namespace: "callbacks",
                before: function() {
                    $('.events').append("<li>before event fired.</li>");
                },
                after: function() {
                    $('.events').append("<li>after event fired.</li>");
                }
            });
        });
    </script>
    <!-- //banner slider -->
    <!-- dropdown nav -->
    <script>
        $(document).ready(function() {
            $(".dropdown").hover(
                function() {
                    $('.dropdown-menu', this).stop(true, true).slideDown("fast");
                    $(this).toggleClass('open');
                },
                function() {
                    $('.dropdown-menu', this).stop(true, true).slideUp("fast");
                    $(this).toggleClass('open');
                }
            );
        });
    </script>
    <!-- //dropdown nav -->
    <script>
        $(document).ready(function($) {
            $('#example2').sliderPro({
                width: 350,
                height: 400,
                visibleSize: '100%',
                forceSize: 'fullWidth',
                autoSlideSize: true
            });
            // instantiate fancybox when a link is clicked
            $(".slider-pro").each(function() {
                var slider = $(this);
                slider.find(".sp-image").parent("a").on("click", function(event) {
                    event.preventDefault();
                    if (slider.hasClass("sp-swiping") === false) {
                        var sliderInstance = slider.data("sliderPro"),
                            isAutoplay = sliderInstance.settings.autoplay;
                        $.fancybox.open(slider.find(".sp-image").parent("a"), {
                            index: $(this).parents(".sp-slide").index(),
                            afterShow: function() {
                                if (isAutoplay === true) {
                                    sliderInstance.settings.autoplay = false;
                                    sliderInstance.stopAutoplay();
                                }
                            },
                            afterClose: function() {
                                if (isAutoplay === true) {
                                    sliderInstance.settings.autoplay = true;
                                    sliderInstance.startAutoplay();
                                }
                            }
                        });
                    }
                });
            });
        });
    </script>
    <!-- /timeline -->
    <script>
        timeline(document.querySelectorAll('.timeline'), {
            forceVerticalMode: 700,
            mode: 'horizontal',
            verticalStartPosition: 'left',
            visibleItems: 4
        });
    </script>
    <!-- //timeline -->
    <!-- //js -->
    <!--/ start-smoth-scrolling -->
    <script>
        jQuery(document).ready(function($) {
            $(".scroll").click(function(event) {
                event.preventDefault();
                $('html,body').animate({
                    scrollTop: $(this.hash).offset().top
                }, 900);
            });
        });
    </script>
    <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>
    <!--// end-smoth-scrolling -->



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



×
×
51前端

注册

×
绑定手机

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

×
单次下载支付

应付金额:279

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

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

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

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