黄色简洁风格响应式人力资源管理网页模板



2 6 3



模板描述:黄色 简洁 响应式 人力资源管理 网页模板,黄色简洁风格响应式人力资源管理网页模板HTML模板下载

代码结构

1. 引入CSS

<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" media="all">
<link href="css/font-awesome.css" rel="stylesheet">
<link href="css/style.css" rel='stylesheet' type='text/css' media="all">
<link href="http://fonts.googleapis.com/css?family=Mukta+Malar:400,500,600,700" rel="stylesheet">
<link href="http://fonts.googleapis.com/css?family=Roboto:400,500" 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.waypoints.min.js"></script>
<script src="js/jquery.countup.js"></script>
<script src="js/move-top.js"></script>
<script src="js/easing.js"></script>
<script src="js/bootstrap.min.js"></script>

3. HTML代码

      <div class="header-outs" id="header">
         <!--banner -->
         <div class="header-w3layouts">
            <!--//navigation section -->
            <nav class="navbar navbar-expand-lg navbar-light">
               <div class="hedder-up">
                  <h1><a class="navbar-brand" href="index.html">Job-Point</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 justify-content-end" id="navbarSupportedContent">
                  <ul class="navbar-nav ">
                     <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 href="about.html" class="nav-link ">About</a>
                     </li>
                     <li class="nav-item">
                        <a href="service.html" class="nav-link">Service</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">
                        Pages
                        </a>
                        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                           <a class="nav-link " href="typography.html">Typography</a>
                           <a href="gallery.html" class="nav-link">Gallery</a>
                        </div>
                     </li>
                     <li class="nav-item">
                        <a href="contact.html" class="nav-link">Contact</a>
                     </li>
                     <li class="nav-button">
                        <button type="button" class="btn login-hedder" data-toggle="modal" data-target="#exampleModalCenter">
                        Login
                        </button>
                     </li>
                  </ul>
                  <div class="both-butns">
                     <ul>
                        <li>
                           <button type="button" class="register-hedder"  data-toggle="modal" data-target="#exampleModalCenter2">
                           Register
                           </button>
                        </li>
                        <li>
                           <div class="contact-hedder">
                              <a href="contact.html">
                              Contact Us</a>
                           </div>
                        </li>
                     </ul>
                  </div>
               </div>
            </nav>
            <!--//navigation section -->
            <div class="clearfix"> </div>
         </div>
      </div>
      <!-- //Navigation -->
      <!-- Slideshow 4 -->
      <div class="slider">
         <div class="callbacks_container">
            <ul class="rslides" id="slider4">
               <li>
                  <div class="slider-img one-img">
                     <div class="container">
                        <div class="slider-info ">
                           <h5>Focus on Mission</h5>
                           <div class="slider-sub">
                              <h6>We Focus on our HR</h6>
                           </div>
                           <div class="bottom-info">
                              <p>
                                 Lorem ipsum dolor sit amet,consectetur adipiscing elit, sed do eiusmod tempor incididunt utadipiscing
                              </p>
                           </div>
                           <div class="outs_more-buttn">
                              <a href="about.html">Read More</a>
                           </div>
                        </div>
                     </div>
                  </div>
               </li>
               <li>
                  <div class="slider-img two-img">
                     <div class="container">
                        <div class="slider-info ">
                           <h5>Expert knowledge
                           </h5>
                           <div class="slider-sub">
                              <h6>Best work place</h6>
                           </div>
                           <div class="bottom-info">
                              <p>
                                 Lorem ipsum dolor sit amet,consectetur adipiscing elit, sed do eiusmod tempor incididunt utadipiscing
                              </p>
                           </div>
                           <div class="outs_more-buttn">
                              <a href="about.html">Read More</a>
                           </div>
                        </div>
                     </div>
                  </div>
               </li>
               <li>
                  <div class="slider-img three-img">
                     <div class="container">
                        <div class="slider-info">
                           <h5>Face Your Challenge
                           </h5>
                           <div class="slider-sub">
                              <h6>Become a Winner</h6>
                           </div>
                           <div class="bottom-info">
                              <p>
                                 Lorem ipsum dolor sit amet,consectetur adipiscing elit, sed do eiusmod tempor incididunt utadipiscing
                              </p>
                           </div>
                           <div class="outs_more-buttn">
                              <a href="about.html">Read More</a>
                           </div>
                        </div>
                     </div>
                  </div>
               </li>
            </ul>
         </div>
         <!-- This is here just to demonstrate the callbacks -->
         <!-- <ul class="events">
            <li>Example 4 callback events</li>
            </ul>-->
         <div class="clearfix"></div>
      </div>
      <!-- //banner -->
      <!-- //about -->
      <section class="about py-lg-4 py-md-3 py-sm-3 py-3">
         <div class="container py-lg-5 py-md-5 py-sm-4 py-4">
            <div class="row w3layout-abt-info text-center">
               <div class="col-lg-3 col-md-6 col-sm-6 abut-list-w3layouts">
                  <div class="abtr-inner-sub">
                     <span class="fa fa-pie-chart" aria-hidden="true"></span>
                     <div class="abt-icon-list-wls mt-3">
                        <h4 class="mb-3">Good Skills</h4>
                        <p>delectus reiciendis maiores alias consequatur aut.maiores alias consequatur aut.maiores alias maiores alias </p>
                     </div>
                  </div>
               </div>
               <div class="col-lg-3 col-md-6 col-sm-6 abut-list-w3layouts">
                  <div class="abtr-inner-sub">
                     <span class="fa fa-check" aria-hidden="true"></span>
                     <div class="abt-icon-list-wls mt-3">
                        <h4 class="mb-3">Experts Help</h4>
                        <p>delectus reiciendis maiores alias consequatur aut.maiores alias consequatur aut.maiores alias maiores alias </p>
                     </div>
                  </div>
               </div>
               <div class="col-lg-3 col-md-6 col-sm-6 abut-list-w3layouts">
                  <div class="abtr-inner-sub">
                     <span class="fa fa-area-chart" aria-hidden="true"></span>
                     <div class="abt-icon-list-wls mt-3">
                        <h4 class="mb-3">Innovation</h4>
                        <p>delectus reiciendis maiores alias consequatur aut.maiores alias maiores alias </p>
                     </div>
                  </div>
               </div>
               <div class="col-lg-3 col-md-6 col-sm-6 abut-list-w3layouts">
                  <div class="abtr-inner-sub">
                     <span class="fa fa-cubes" aria-hidden="true"></span>
                     <div class="abt-icon-list-wls mt-3">
                        <h4 class="mb-3">Creative</h4>
                        <p>delectus reiciendis maiores alias consequatur aut.maiores alias</p>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </section>
      <!--//about -->
      <!--service  -->
      <section class="service py-lg-4 py-md-3 py-sm-3 py-3" id="service">
         <div class="container py-lg-5 py-md-5 py-sm-4 py-3">
            <h3 class="title clr text-center mb-lg-5 mb-md-4 mb-sm-4 mb-3">Our Services</h3>
            <div class="row top-service pb-lg-4 pb-md-3 pb-2">
               <div class="col-lg-8 col-md-8 service-wthree-info-left" >
                  <div class="mb-lg-5 mb-md-4 mb-3 service-num-left">
                     <h6>1</h6>
                  </div>
                  <h4 class="mb-lg-4 mb-3"> Professional Agency</h4>
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt Lorem ipsum dolor sit amet</p>
               </div>
               <div class="col-lg-4 col-md-4 ser-service gap-service text-center">
                  <div class="service-icon-one">
                     <img src="images/ser1.png" alt="" class="img-fluid">
                  </div>
               </div>
            </div>
            <div class=" my-lg-5 my-md-4 my-sm-4 my-3 row mid-service">
               <div class="col-lg-4 col-md-4 ser-service  text-center">
                  <div class="service-icon-two move-right">
                     <img src="images/ser2.png" alt="" class="img-fluid">
                  </div>
               </div>
               <div class="col-lg-8 col-md-8 service-wthree-info-left">
                  <div class="mb-lg-5 mb-md-4 mb-3 service-num-left">
                     <h6>2</h6>
                  </div>
                  <h4 class="mb-lg-4 mb-3">Tax Advice and Management</h4>
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt Lorem ipsum dolor sit amet</p>
               </div>
            </div>
            <div class="row bottom-service pt-lg-4 pt-md-3 pt-2">
               <div class="col-lg-8 col-md-8 service-wthree-info-left" >
                  <div class="mb-lg-5 mb-md-4 mb-3 service-num-left">
                     <h6>3</h6>
                  </div>
                  <h4 class="mb-lg-4 mb-3">Planning & Strategy</h4>
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt Lorem ipsum dolor sit ametLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt Lorem ipsum dolor sit amet,</p>
               </div>
               <div class="col-lg-4 col-md-4 ser-service gap-service text-center">
                  <div class="service-icon-three">
                     <img src="images/ser3.png" alt="" class="img-fluid">
                  </div>
               </div>
            </div>
         </div>
      </section>
      <!--//service  -->
      <!--team-->
      <section class="team py-lg-4 py-md-3 py-sm-3 py-3">
         <div class="container py-lg-5 py-md-5 py-sm-4 py-3">
            <h3 class="title text-center mb-lg-5 mb-md-4 mb-sm-4 mb-3">Meet Our Team</h3>
            <div class="row pt-lg-5 pt-md-5 pt-sm-4 pt-3">
               <div class="col-lg-3 col-md-6 col-sm-6 ser-icon text-center">
                  <div class="team-position">
                     <div class="icon-wthree-top">
                        <img src="images/t1.jpg" alt="" class="img-fluid">
                     </div>
                     <div class="team-text-wthree">
                        <h4>
                           Sam Deo
                        </h4>
                        <p class="mt-3">Lorem ipsum dolor sit amet, consectetuer adipiscing elit Lorem ipsum dolor sit amet, consectetur adipiscing</p>
                     </div>
                     <div class="icons-client text-center">
                        <ul>
                           <li><a href="#"><span class="fa fa-facebook"></span></a></li>
                           <li><a href="#"><span class="fa fa-twitter"></span></a></li>
                           <li><a href="#"><span class="fa fa-rss"></span></a></li>
                        </ul>
                     </div>
                  </div>
               </div>
               <div class="col-lg-3 col-md-6 col-sm-6 ser-icon text-center">
                  <div class="team-position">
                     <div class="icon-wthree-top">
                        <img src="images/t2.jpg" alt="" class="img-fluid">
                     </div>
                     <div class="team-text-wthree">
                        <h4>
                           Max Will
                        </h4>
                        <p class="mt-3">Lorem ipsum dolor sit amet, consectetuer adipiscing elit Lorem ipsum dolor sit amet, consectetur adipiscing</p>
                     </div>
                     <div class="icons-client text-center">
                        <ul>
                           <li><a href="#"><span class="fa fa-facebook"></span></a></li>
                           <li><a href="#"><span class="fa fa-twitter"></span></a></li>
                           <li><a href="#"><span class="fa fa-rss"></span></a></li>
                        </ul>
                     </div>
                  </div>
               </div>
               <div class="col-lg-3 col-md-6 col-sm-6 ser-icon text-center">
                  <div class="team-position">
                     <div class="icon-wthree-top">
                        <img src="images/t3.jpg" alt="" class="img-fluid">
                     </div>
                     <div class="team-text-wthree">
                        <h4>
                           Ray Son
                        </h4>
                        <p class="mt-3">Lorem ipsum dolor sit amet, consectetuer adipiscing elit Lorem ipsum dolor sit amet, consectetur adipiscing</p>
                     </div>
                     <div class="icons-client text-center">
                        <ul>
                           <li><a href="#"><span class="fa fa-facebook"></span></a></li>
                           <li><a href="#"><span class="fa fa-twitter"></span></a></li>
                           <li><a href="#"><span class="fa fa-rss"></span></a></li>
                        </ul>
                     </div>
                  </div>
               </div>
               <div class="col-lg-3 col-md-6 col-sm-6 ser-icon text-center">
                  <div class="team-position">
                     <div class="icon-wthree-top">
                        <img src="images/t4.jpg" alt="" class="img-fluid">
                     </div>
                     <div class="team-text-wthree">
                        <h4>
                           Zone Hill
                        </h4>
                        <p class="mt-3">Lorem ipsum dolor sit amet, consectetuer adipiscing elit Lorem ipsum dolor sit amet, consectetur adipiscing</p>
                     </div>
                     <div class="icons-client text-center">
                        <ul>
                           <li><a href="#"><span class="fa fa-facebook"></span></a></li>
                           <li><a href="#"><span class="fa fa-twitter"></span></a></li>
                           <li><a href="#"><span class="fa fa-rss"></span></a></li>
                        </ul>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </section>
      <!--//team-->
      <!--Testmonials-->
      <section class="clients py-lg-4 py-md-3 py-sm-3 py-3">
         <div class="container py-lg-5 py-md-5 py-sm-4 py-3">
            <h3 class="title text-center mb-lg-5 mb-md-4 mb-sm-4 mb-3">Testimonials</h3>
            <div class="testmonials text-center">
               <div id="blogCarousel" class="carousel slide" data-ride="carousel">
                  <ol class="carousel-indicators">
                     <li data-target="#blogCarousel" data-slide-to="0" class="active"></li>
                     <li data-target="#blogCarousel" data-slide-to="1">
                     <li data-target="#blogCarousel" data-slide-to="2">
                  </ol>
                  <!-- Carousel items -->
                  <div class="carousel-inner">
                     <div class="carousel-item active">
                        <div class="row">
                           <div class="col-lg-4 clients-gride-img ">
                              <div class="clients-gride-grid">
                                 <div class="mb-3 clients-w3pvt-img">
                                    <img src="images/c1.jpg" alt=" " class="img-fluid">
                                 </div>
                                 <div class="clients-color-wthree text-center">
                                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit
                                       Lorem ipsum dolor sit amet, consectetuer adipiscing elit
                                       Lorem ipsum dolor sit amet, consectetuer adipiscing elit
                                       Lorem ipsum dolor sit amet
                                    </p>
                                    <div class="clients-txt-wls">
                                       <h4 class="mt-3">Rose Kent</h4>
                                    </div>
                                 </div>
                              </div>
                           </div>
                           <div class="col-lg-4 clients-gride-img ">
                              <div class="clients-gride-grid">
                                 <div class="mb-3 clients-w3pvt-img">
                                    <img src="images/c2.jpg" alt=" " class="img-fluid">
                                 </div>
                                 <div class="clients-color-wthree text-center">
                                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit
                                       Lorem ipsum dolor sit amet, consectetuer adipiscing elit
                                       Lorem ipsum dolor sit amet, consectetuer adipiscing elit
                                       Lorem ipsum dolor sit amet
                                    </p>
                                    <div class="clients-txt-wls">
                                       <h4 class="mt-3">Jack Will</h4>
                                    </div>
                                 </div>
                              </div>
                           </div>
                           <div class="col-lg-4 clients-gride-img ">
                              <div class="clients-gride-grid">
                                 <div class="mb-3 clients-w3pvt-img">
                                    <img src="images/c3.jpg" alt=" " class="img-fluid">
                                 </div>
                                 <div class="clients-color-wthree text-center">
                                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit
                                       Lorem ipsum dolor sit amet, consectetuer adipiscing elit
                                    </p>
                                    <div class="clients-txt-wls">
                                       <h4 class="mt-3 ">Clark Deo</h4>
                                    </div>
                                 </div>
                              </div>
                           </div>
                        </div>
                     </div>
                     <!--.row-->
                     <div class="carousel-item">
                        <div class="row">
                           <div class="col-lg-4 clients-gride-img">
                              <div class="clients-gride-grid">
                                 <div class="mb-3 clients-w3pvt-img">
                                    <img src="images/c1.jpg" alt=" " class="img-fluid">
                                 </div>
                                 <div class="clients-color-wthree text-center">
                                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit
                                       Lorem ipsum dolor sit amet, consectetuer adipiscing elit
                                       Lorem ipsum dolor sit amet, consectetuer adipiscing elit
                                       Lorem ipsum dolor sit amet
                                    </p>
                                    <div class="clients-txt-wls">
                                       <h4 class="mt-3">Rose Kent</h4>
                                    </div>
                                 </div>
                              </div>
                           </div>
                           <div class="col-lg-4 clients-gride-img">
                              <div class="clients-gride-grid">
                                 <div class="mb-3 clients-w3pvt-img">
                                    <img src="images/c2.jpg" alt=" " class="img-fluid">
                                 </div>
                                 <div class="clients-color-wthree text-center">
                                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit
                                       Lorem ipsum dolor sit amet, consectetuer adipiscing elit
                                       Lorem ipsum dolor sit amet, consectetuer adipiscing elit
                                       Lorem ipsum dolor sit amet
                                    </p>
                                    <div class="clients-txt-wls">
                                       <h4 class="mt-3">Jack Will</h4>
                                    </div>
                                 </div>
                              </div>
                           </div>
                           <div class="col-lg-4 clients-gride-img">
                              <div class="clients-gride-grid">
                                 <div class="mb-3 clients-w3pvt-img">
                                    <img src="images/c3.jpg" alt=" " class="img-fluid">
                                 </div>
                                 <div class="clients-color-wthree text-center">
                                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit
                                       Lorem ipsum dolor sit amet, consectetuer adipiscing elit
                                    </p>
                                    <div class="clients-txt-wls">
                                       <h4 class="mt-3 ">Clark Deo</h4>
                                    </div>
                                 </div>
                              </div>
                           </div>
                        </div>
                     </div>
                     <!--.row-->
                     <!--.item-->
                     <div class="carousel-item">
                        <div class="row">
                           <div class="col-lg-4 clients-gride-img ">
                              <div class="clients-gride-grid">
                                 <div class="mb-3 clients-w3pvt-img">
                                    <img src="images/c1.jpg" alt=" " class="img-fluid">
                                 </div>
                                 <div class="clients-color-wthree text-center">
                                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit
                                       Lorem ipsum dolor sit amet, consectetuer adipiscing elit
                                       Lorem ipsum dolor sit amet, consectetuer adipiscing elit
                                       Lorem ipsum dolor sit amet
                                    </p>
                                    <div class="clients-txt-wls">
                                       <h4 class="mt-3">Rose Kent</h4>
                                    </div>
                                 </div>
                              </div>
                           </div>
                           <div class="col-lg-4 clients-gride-img">
                              <div class="clients-gride-grid">
                                 <div class="mb-3 clients-w3pvt-img">
                                    <img src="images/c2.jpg" alt=" " class="img-fluid">
                                 </div>
                                 <div class="clients-color-wthree text-center">
                                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit
                                       Lorem ipsum dolor sit amet, consectetuer adipiscing elit
                                       Lorem ipsum dolor sit amet, consectetuer adipiscing elit
                                       Lorem ipsum dolor sit amet
                                    </p>
                                    <div class="clients-txt-wls">
                                       <h4 class="mt-3">Jack Will</h4>
                                    </div>
                                 </div>
                              </div>
                           </div>
                           <div class="col-lg-4 clients-gride-img">
                              <div class="clients-gride-grid">
                                 <div class="mb-3 clients-w3pvt-img">
                                    <img src="images/c3.jpg" alt=" " class="img-fluid">
                                 </div>
                                 <div class="clients-color-wthree text-center">
                                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit
                                       Lorem ipsum dolor sit amet, consectetuer adipiscing elit
                                    </p>
                                    <div class="clients-txt-wls">
                                       <h4 class="mt-3 ">Clark Deo</h4>
                                    </div>
                                 </div>
                              </div>
                           </div>
                        </div>
                     </div>
                  </div>
                  <!--.row-->
               </div>
            </div>
         </div>
         <!--carousel-inner-->
      </section>
      <!--//Testmonials-->
      <!--stats-->
      <section class="stats py-lg-4 py-md-3 py-sm-3 py-3">
         <div class="container py-lg-5 py-md-5 py-sm-4 py-3">
            <h3 class="title text-center mb-lg-5 mb-md-4 mb-sm-4 mb-3">Fun Facts</h3>
            <div class="row">
               <div class="col-lg-5 col-md-5">
                  <div class="jst-must-info text-center">
                     <div class="row stats-info">
                        <div class="col-md-6 col-sm-6 col-6 stats-grid-1">
                           <div class=" stats-grid">
                              <div class="counter">2045</div>
                              <div class="stat-info">
                                 <h5 class="pt-2">Experience </h5>
                              </div>
                           </div>
                        </div>
                        <div class="col-md-6 col-sm-6 col-6 stats-grid-2">
                           <div class=" stats-grid">
                              <div class="counter">350</div>
                              <div class="stat-info">
                                 <h5 class="pt-2"> Staff</h5>
                              </div>
                           </div>
                        </div>
                        <div class="mt-lg-4 mt-md-3 mt-3 col-md-6 col-sm-6 col-6 stats-grid-3">
                           <div class=" stats-grid">
                              <div class="counter">1000</div>
                              <div class="stat-info">
                                 <h5 class="pt-2"> Coffee</h5>
                              </div>
                           </div>
                        </div>
                        <div class="mt-lg-4 mt-md-3 mt-3 col-md-6 col-sm-6 col-6 stats-grid-4">
                           <div class=" stats-grid">
                              <div class="counter">650</div>
                              <div class="stat-info">
                                 <h5 class="pt-2"> Projects </h5>
                              </div>
                           </div>
                        </div>
                     </div>
                  </div>
               </div>
               <div class="col-lg-7 col-md-7 left-side-w3layouts">
                  <div class="iteam-bar">
                     <h5 class="pb-3">HR Magazine</h5>
                     <div class="progress my-bar">
                        <div class="progress-bar progress-bar-striped " role="progressbar" style="width: 75%"></div>
                     </div>
                  </div>
                  <div class="iteam-bar pt-lg-4 pt-3">
                     <h5 class="pb-3">Events & Blogs</h5>
                     <div class="progress my-bar">
                        <div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 80%"></div>
                     </div>
                  </div>
                  <div class="iteam-bar pt-lg-4  pt-3">
                     <h5 class="pb-3">Social Media</h5>
                     <div class="progress my-bar">
                        <div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 85%"></div>
                     </div>
                  </div>
                  <div class="iteam-bar pt-lg-4 pt-3">
                     <h5 class="pb-3">Requirements</h5>
                     <div class="progress my-bar">
                        <div class="progress-bar progress-bar-striped bg-danger" role="progressbar" style="width: 100%"></div>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </section>
      <!--//stats-->
      <!--footer-->
      <footer class="buttom-footer py-lg-5 py-md-4 py-sm-3 py-3">
         <div class="container-fluid py-3">
            <h3 class="title clr text-center mb-lg-5 mb-md-4 mb-sm-4 mb-3">Newsletter</h3>
            <!--subscribe-->
            <div class="mb-lg-5 mb-md-4 mb-3 sub-wthree-form">
               <form>
                  <div class="form-group email-sub-w3layouts">
                     <input type="email" class="form-control email-sub-w3layouts" placeholder="Email" required="">
                  </div>
                  <div class="pt-sm-3 pt-2 text-center">
                     <button type="submit" class="btn subscrib-btnn">Subscribe</button>
                  </div>
               </form>
            </div>
            <!--//subscribe-->
            <div class="row">
               <div class="col-lg-7 col-md-7">
                  <div class="headder-logo-icon text-center">
                     <h2><a href="index.html">Job-point</a></h2>
                  </div>
                  <div class="footer-bottom py-lg-4 py-md-3 py-2 text-center">
                     <p>Copyright &copy; 2019.Company name All rights reserved.<a href="https://www.51qianduan.com/">51前端</a></p>
                  </div>
               </div>
               <div class="col-lg-5 col-md-5">
                  <div class="buttom-nav py-2">
                     <nav class="border-line">
                        <ul class="nav justify-content-center">
                           <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 href="about.html" class="nav-link ">About</a>
                           </li>
                           <li class="nav-item">
                              <a href="service.html" class="nav-link">Services</a>
                           </li>
                           <li class="nav-item">
                              <a href="contact.html" class="nav-link">Contact</a>
                           </li>
                        </ul>
                     </nav>
                  </div>
                  <div class="icons text-center">
                     <ul>
                        <li><a href="#"><span class="fa fa-facebook"></span></a></li>
                        <li><a href="#"><span class="fa fa-twitter"></span></a></li>
                        <li><a href="#"><span class="fa fa-rss"></span></a></li>
                     </ul>
                  </div>
               </div>
            </div>
         </div>
      </footer>
      <!--//footer-->
      <!--/Login-->
      <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-hidden="true">
         <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
               <div class="modal-header text-center">
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                  </button>
               </div>
               <div class="modal-body">
                  <div class="login px-4 py-4 mx-auto mw-100">
                     <h5 class="text-center mb-4">Login Now</h5>
                     <form action="#" method="post">
                        <div class="form-group">
                           <p class="mb-2">Email address</p>
                           <input type="email" class="form-control" id="exampleInputEmail1"  placeholder="" required="">
                        </div>
                        <div class="form-group">
                           <p class="mb-2">Password</p>
                           <input type="password" class="form-control" id="exampleInputPassword1" placeholder="" required="">
                        </div>
                        <div class="form-check mb-3">
                           <input type="checkbox" class="form-check-input" id="exampleCheck1">
                           <p class="form-check-p">Check me out</p>
                        </div>
                        <button type="submit" class="btn submit">Sign In</button>
                     </form>
                  </div>
               </div>
            </div>
         </div>
      </div>
      <!--//Login-->
      <!--/Register-->
      <div class="modal fade" id="exampleModalCenter2" tabindex="-1" role="dialog" aria-hidden="true">
         <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
               <div class="modal-header text-center">
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                  </button>
               </div>
               <div class="modal-body">
                  <div class="login px-4 py-4 mx-auto mw-100">
                     <h5 class="text-center mb-4">Register Now</h5>
                     <form action="#" method="post">
                        <div class="form-group ">
                           <p class="mb-2">First name</p>
                           <input type="text" class="form-control" id="validationDefault01" placeholder="" required="">
                        </div>
                        <div class="form-group">
                           <p class="mb-2">Last name</p>
                           <input type="text" class="form-control" id="validationDefault02" placeholder="" required="">
                        </div>
                        <div class="form-group">
                           <p class="mb-2">Password</p>
                           <input type="password" class="form-control" id="password1" placeholder="" required="">
                        </div>
                        <div class="form-group">
                           <p class="mb-2">Confirm Password</p>
                           <input type="password" class="form-control" id="password2" placeholder="" required="">
                        </div>
                        <button type="submit" class="btn submit ">Register</button>
                     </form>
                  </div>
               </div>
            </div>
         </div>
      </div>
      <!--//Register-->
      <!--js working-->
      <!--//js working--> 
      <!--responsiveslides banner-->
      <script>
         // You can also use "$(window).load(function() {"
         $(function () {
         	// Slideshow 4
         	$("#slider4").responsiveSlides({
         		auto:true,
         		pager:false,
         		nav:true,
         		speed: 900,
         		namespace: "callbacks",
         		before: function () {
         			$('.events').append("<li>before event fired.</li>");
         		},
         		after: function () {
         			$('.events').append("<li>after event fired.</li>");
         		}
         	});
         });
      </script>
      <!--// responsiveslides banner-->	 
      <!--About OnScroll-Number-Increase-JavaScript -->
      <script>
         $('.counter').countUp();
      </script>
      <!-- //OnScroll-Number-Increase-JavaScript -->  
      <!-- start-smoth-scrolling -->
      <script>
         jQuery(document).ready(function ($) {
         	$(".scroll").click(function (event) {
         		event.preventDefault();
         		$('html,body').animate({
         			scrollTop: $(this.hash).offset().top
         		}, 900);
         	});
         });
      </script>
      <!-- start-smoth-scrolling -->
      <!-- here stars scrolling icon -->
      <script>
         $(document).ready(function () {
         	var defaults = {
         		containerID: 'toTop', // fading element id
         		containerHoverID: 'toTopHover', // fading element hover id
         		scrollSpeed: 1100,
         		easingType: 'linear'
         	};
         	$().UItoTop({
         		easingType: 'easeOutQuart'
         	});
         });
      </script>
      <!-- //here ends scrolling icon -->
      <!--bootstrap working-->
      <!-- //bootstrap working-->



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


热门标签: 行业 企业 公司 工厂 分类 响应式 自适应 设备 风格 颜色 企业 行业 公司 工厂 bootstrap bootstrap自适应 bootstrap响应式 欧美风 欧美 欧洲 美洲 pc+wap 移动+电脑 手机+电脑 黄色 大气 霸气 咨询管理 咨询 管理 咨询管理公司 咨询公司 管理公司

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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