黄色简洁风格响应式石油天然气企业网站模板



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

15 56 19



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

代码结构

1. 引入CSS

<link rel="stylesheet" href="assets/css/style-starter.css">
<link href="http://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900&display=swap" rel="stylesheet">
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800&display=swap" rel="stylesheet">

2. 引入JS

<script src="assets/js/jquery-3.4.1.slim.min.js"></script>
<script src="assets/js/owl.carousel.js"></script>
<script src="assets/js/jquery.waypoints.min.js"></script>
<script src="assets/js/jquery.countup.js"></script>
<script src="assets/js/bootstrap.min.js"></script>

3. HTML代码

<!-- top-header-strip -->
<header class="w3l-top-header-strip">
	<div class="hero-header-11">
		<div class="hero-header-11-content">
			<div class="main-header">
				<div class="container-fluid">
					<div class="d-grid grid-columns-auto">
						<div class="right-grid align-left d-grid">
							<div class="quick-links">
								<ul>
									<li>
										<span class="fa fa-phone" aria-hidden="true"></span>
										<a href="tel:+123-456-789">+123-456-789 </a>
									</li>
									<li>
										<span class="fa fa-envelope-o" aria-hidden="true"></span>
										<a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
									<li class="mobile-none">
										<span class="fa fa-clock-o" aria-hidden="true"></span>
										<p>Mon - Fri: 9:00 - 19:00 / Closed on Weekends</p>
									</li>
								</ul>
							</div>
							<div class="button align-right">
								<a href="contact.html" class="btn btn-primary theme-button">Get a Quote</a>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</header>
<!-- //top-header-strip -->
<!-- header -->
<header class="w3l-header">
	<div class="hero-header-11">
		<div class="hero-header-11-content">
			<div class="container-fluid">
				<nav class="navbar navbar-expand-lg navbar-light py-0 px-0">
					<a class="navbar-brand" href="index.html"><img src="assets/images/logo-icon.png" alt="" />Factory</a>
					<!-- if logo is image enable this   
				<a class="navbar-brand" href="#index.html">
						<img src="image-path" alt="Your logo" title="Your logo" style="height:35px;" />
				</a> -->
					<button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
						aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
						<span class="navbar-toggler-icon fa icon-expand fa-bars"></span>
						<span class="navbar-toggler-icon fa icon-close fa-times"></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 @@about-active">
								<a class="nav-link" href="about.html">About</a>
							</li>
							<li class="nav-item @@services-active">
								<a class="nav-link" href="services.html">Services</a>
							</li>
							<li class="nav-item @@contact-active">
								<a class="nav-link" href="contact.html">Contact</a>
							</li>
						</ul>
						<div class="form-inline ml-lg-3">
							<form action="#search-results" class="form-inline position-relative my-2 my-lg-0">
								<input class="form-control search" type="search" placeholder="Search here..." aria-label="Search" required>
								<button class="btn btn-search position-absolute" type="submit"><span class="fa fa-search" aria-hidden="true"></span></button>
							</form>
						</div>
					</div>
				</nav>
			</div>
		</div>
	</div>
</header>
<!-- //header -->
<section class="w3l-main-slider">
  <!-- main-slider -->
  <div class="companies20-content">
    <div class="companies-wrapper">
      <div class="owl-one owl-carousel owl-theme text-center">
        <div class="item">
          <li>
            <div class="slider-info banner-view">
              <div class="banner-info container">
                <p class="slideone">We are industry factory solutions</p>
                <h3 class="banner-text mt-lg-5 mt-md-4 mt-3">Extremely intellectual & challenging projects</h3>
                <a href="about.html" class="btn btn-primary theme-button">About Us</a>
              </div>
            </div>
          </li>
        </div>
        <div class="item">
          <li>
            <div class="slider-info  banner-view banner-top1">
              <div class="banner-info container">
                <p class="slidetwo">Extremely intellectual & challenging projects</p>
                <h3 class="banner-text mt-lg-5 mt-md-4 mt-3">Helping industrial organizations & businesses
                  lead the wave </h3>
                <a href="services.html" class="btn btn-primary theme-button">Our Services</a>
              </div>
            </div>
          </li>
        </div>
        <div class="item">
          <li>
            <div class="slider-info banner-view banner-top2">
              <div class="banner-info container">
                <h3 class="banner-text mb-0">Advanced Industrial & Manufacturing Business Theme</h3>
                <p class="slidethree mt-4 mb-md-5 mb-4">Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae atque quae illum quos. Laboriosam at iusto dicta fuga qui neque quos! Quisquam ut quos ratione delectus facere, aliquid architecto autem!</p>
                <a href="contact.html" class="btn btn-primary theme-button">Contact Us</a>
              </div>
            </div>
          </li>
        </div>
      </div>
    </div>
  </div>
  <!-- /main-slider -->
</section>
<!--  services section -->
<section class="w3l-index1" id="services">
  <div class="features-with-17_sur py-5">
    <div class="container py-lg-3">
      <div class="header-section text-center">
        <h3>Why Customer Love To
          Choose Us</h3>
          <p class="mt-3 mb-5">Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti sit labore dolores aliquam possimus deleniti cupiditate temporibus, repudiandae suscipit asperiores vel.</p>
      </div>
      <div class="features-with-17-top_sur">
        <div class="row">
          <div class="col-lg-4 col-md-6 m-top">
            <div class="features-with-17-right-tp_sur">
              <div class="features-with-17-left1">
                <span class="fa fa-industry" aria-hidden="true"></span>
              </div>
              <div class="features-with-17-left2">
                <h6><a href="services.html">Mechanical Works</a></h6>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Id, minima. It is a long established fact that a reader will be
                  distracted by the readable.</p>
              </div>
            </div>
          </div>
          <div class="col-lg-4 col-md-6 m-top">
            <div class="features-with-17-right-tp_sur">
              <div class="features-with-17-left1">
                <span class="fa fa-power-off" aria-hidden="true"></span>
              </div>
              <div class="features-with-17-left2">
                <h6><a href="services.html">Power & Energy</a></h6>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Id, minima. It is a long established fact that a reader will be
                  distracted by the readable.</p>
              </div>
            </div>
          </div>
          <div class="col-lg-4 col-md-6 m-top">
            <div class="features-with-17-right-tp_sur">
              <div class="features-with-17-left1">
                <span class="fa fa-map-o" aria-hidden="true"></span>
              </div>
              <div class="features-with-17-left2">
                <h6><a href="services.html">Petroleum Refinery</a> </h6>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Id, minima. It is a long established fact that a reader will be
                  distracted by the readable.</p>
              </div>
            </div>
          </div>
          <div class="col-lg-4 col-md-6 m-top">
            <div class="features-with-17-right-tp_sur">
              <div class="features-with-17-left1">
                <span class="fa fa-modx" aria-hidden="true"></span>
              </div>
              <div class="features-with-17-left2">
                <h6><a href="services.html">Oil & Gas industry</a></h6>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Id, minima. It is a long established fact that a reader will be
                  distracted by the readable.</p>
              </div>
            </div>
          </div>
          <div class="col-lg-4 col-md-6 m-top">
            <div class="features-with-17-right-tp_sur">
              <div class="features-with-17-left1">
                <span class="fa fa-podcast" aria-hidden="true"></span>
              </div>
              <div class="features-with-17-left2">
                <h6><a href="services.html">Automative Manufacturing</a></h6>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Id, minima. It is a long established fact that a reader will be
                  distracted by the readable.</p>
              </div>
            </div>
          </div>
          <div class="col-lg-4 col-md-6 m-top">
            <div class="features-with-17-right-tp_sur">
              <div class="features-with-17-left1">
                <span class="fa fa-bar-chart" aria-hidden="true"></span>
              </div>
              <div class="features-with-17-left2">
                <h6><a href="services.html">Chemical Research</a> </h6>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Id, minima. It is a long established fact that a reader will be
                  distracted by the readable.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
<!--  //services section -->
<section class="w3l-index2">
  <div class="row abouthy-img-grids no-gutters">
    <div class="col-lg-4 col-md-6 img-one">
      <img src="assets/images/img4.jpg" alt=" " class="img-fluid">
    </div>
    <div class="col-lg-4 col-md-6 img-one content-mid py-md-0 py-5">
      <div class="info">
        <h3>
          Oil & Gas Industry
        </h3>
        <p class="mt-3 mb-5 white">Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus voluptatum, nostrum sed alias accusamus earum.
        </p>
        <a href="about.html" class="btn btn-light theme-button">About Us</a>
      </div>
    </div>
    <div class="col-lg-4 col-md-6 img-one">
      <img src="assets/images/img2.jpg" alt=" " class="img-fluid">
    </div>
    <div class="col-lg-4 col-md-6 img-info content-mid py-md-0 py-5">
      <div class="info">
        <h3>
          Automative Manufacturing
        </h3>
        <p class="mt-3 mb-5">Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus voluptatum, nostrum sed alias accusamus earum.</p>
        <a href="services.html" class="btn btn-primary theme-button">Our Services</a>
      </div>
    </div>
    <div class="col-lg-4 col-md-6 img-one">
      <img src="assets/images/img8.jpg" alt=" " class="img-fluid">
    </div>
    <div class="col-lg-4 col-md-6 img-info content-mid py-md-0 py-5">
      <div class="info">
        <h3>
          Power and Energy
        </h3>
        <p class="mt-3 mb-5">Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus voluptatum, nostrum sed alias accusamus earum.</p>
        <a href="contact.html" class="btn btn-primary theme-button">Contact Us</a>
      </div>
    </div>
  </div>
</section>
<div class="w3l-index3 pt-5" id="about">
  <div class="container pt-lg-3">
    <div class="header-section text-center">
      <h3>Who We Are</h3>
      <p class="mt-3 mb-5">Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti sit labore dolores aliquam possimus deleniti cupiditate
        temporibus, repudiandae suscipit asperiores vel.</p>
    </div>
    <div class="aboutgrids row">
      <div class="col-lg-6 aboutgrid1">
        <h4>Dream Big
          Inspire the World</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam id quisquam ipsam molestiae ad eius
          accusantium? Nulla dolorem perferendis inventore!
          posuere cubilia Curae; Nunc non risus in justo convallis feugiat.</p>
        <ul class="services-list mb-5">
          <li>Products & Solutions</li>
          <li>Dream big inspiring solutions</li>
          <li>Assured plant availability and operational security</li>
          <li>Improved operating conditions</li>
          <li>Relief of company's own maintenance resources</li>          
        </ul>
        <a href="services.html" class="btn btn-primary theme-button">More services</a>
      </div>
      <div class="col-lg-6 aboutgrid2 mt-lg-0 mt-5">
        <img src="assets/images/about.jpg" alt="about image" class="img-fluid" />
      </div>
    </div>
  </div>
  <div class="aboutbottom py-5 bg bg2">
    <div class="container py-lg-3">
      <div class="bottomgrids row">
        <div class="col-lg-3 col-md-6 bottomgrid1 mt-lg-0 mt-0 propClone">
          <h4><a href="services.html">Automotive Manufacturing</a></h4>
          <p>Donec et venenatis libero. Fusceing dapibus pulvinar tincidunt. Proin
            maximus ipsum ut scelerisque.</p>
        </div>
        <div class="col-lg-3 col-md-6 bottomgrid1 mt-md-0 mt-5 propClone">
          <h4><a href="services.html">Bridge Construction</a></h4>
          <p>Donec et venenatis libero. Fusceing dapibus pulvinar tincidunt. Proin
            maximus ipsum ut scelerisque.</p>
        </div>
        <div class="col-lg-3 col-md-6 bottomgrid1 mt-lg-0 mt-5 propClone">
          <h4><a href="services.html">Industrial Construction</a></h4>
          <p>Donec et venenatis libero. Fusceing dapibus pulvinar tincidunt. Proin
            maximus ipsum ut scelerisque.</p>
        </div>
        <div class="col-lg-3 col-md-6 bottomgrid1 mt-lg-0 mt-5 propClone">
          <h4><a href="services.html">Mechanical Engineering</a></h4>
          <p>Donec et venenatis libero. Fusceing dapibus pulvinar tincidunt. Proin
            maximus ipsum ut scelerisque.</p>
        </div>
        <div class="clearfix"> </div>
      </div>
    </div>
  </div>
</div>
<section class="w3l-index4">
	<!-- /features -->
	<div class="features py-5" id="services">
		<div class="container py-lg-3">
			<div class="header-section white text-center">
				<h3>Exclusive features for you</h3>
        <p class="mt-3 mb-5">Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti sit labore dolores aliquam possimus deleniti cupiditate temporibus, repudiandae suscipit asperiores vel.</p>
			</div>
			<div class="row">
				<div class="col-lg-4 col-md-6">
					<div class="feature-gd">
						<div class="icon"> <span class="fa fa-map-o" aria-hidden="true"></span></div>
						<div class="icon-info">
							<h5 class="my-3"><a href="services.html">Electronic Materials</a></h5>
							<p> Lorem ipsum dolor sit amet, consectetur adipisicingelit, sed do eiusmod tempor incididunt ut labore et
								dolore magna aliqua, quis nostrud.</p>
						</div>
					</div>
				</div>
				<div class="col-lg-4 col-md-6">
				<div class="feature-gd">
					<div class="icon"> <span class="fa fa-power-off" aria-hidden="true"></span></div>
					<div class="icon-info">
						<h5 class="my-3"><a href="services.html">Power Systems</a></h5>
            <p> Lorem ipsum dolor sit amet, consectetur adipisicingelit, sed do eiusmod tempor incididunt ut labore et
              dolore magna aliqua, quis nostrud.</p>
					</div>
				</div>
				</div>
				<div class="col-lg-4 col-md-6">
				<div class="feature-gd">
					<div class="icon"> <span class="fa fa-podcast" aria-hidden="true"></span></div>
					<div class="icon-info">
						<h5 class="my-3"><a href="services.html">Building Management</a></h5>
            <p> Lorem ipsum dolor sit amet, consectetur adipisicingelit, sed do eiusmod tempor incididunt ut labore et
              dolore magna aliqua, quis nostrud.</p>
					</div>
				</div>
			</div>
			<div class="col-lg-4 col-md-6">
				<div class="feature-gd">
					<div class="icon"> <span class="fa fa-bar-chart" aria-hidden="true"></span></div>
					<div class="icon-info">
						<h5 class="my-3"><a href="services.html">Heavy Machinery</a></h5>
            <p> Lorem ipsum dolor sit amet, consectetur adipisicingelit, sed do eiusmod tempor incididunt ut labore et
              dolore magna aliqua, quis nostrud.</p>
					</div>
				</div>
			</div>
			<div class="col-lg-4 col-md-6">
				<div class="feature-gd">
					<div class="icon"> <span class="fa fa-industry" aria-hidden="true"></span></div>
					<div class="icon-info">
						<h5 class="my-3"><a href="services.html">Light Machinery</a></h5>
            <p> Lorem ipsum dolor sit amet, consectetur adipisicingelit, sed do eiusmod tempor incididunt ut labore et
              dolore magna aliqua, quis nostrud.</p>
					</div>
				</div>
			</div>
			<div class="col-lg-4 col-md-6">
				<div class="feature-gd">
					<div class="icon"> <span class="fa fa-modx" aria-hidden="true"></span></div>
					<div class="icon-info">
						<h5 class="my-3"><a href="services.html">Gifts & Apparel</a></h5>
            <p> Lorem ipsum dolor sit amet, consectetur adipisicingelit, sed do eiusmod tempor incididunt ut labore et
              dolore magna aliqua, quis nostrud.</p>
					</div>
				</div>
			</div>
			</div>
		</div>
	</div>
	<!-- //features -->
</section>
<section class="w3l-testimonials" id="testimonials">
  <div class="testimonials py-5">
    <div class="container py-lg-5">
      <div class="header-section text-center">
        <h3>Clients Say About Us</h3>
        <p class="mt-3 mb-5">Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti sit labore dolores aliquam possimus deleniti cupiditate temporibus, repudiandae suscipit asperiores vel.</p>
      </div>
      <div class="row mt-4">
        <div class="col-md-10 mx-auto">
          <div class="owl-two owl-carousel owl-theme">
            <div class="item">
              <div class="slider-info mt-lg-4 mt-3">
                <div class="img-circle">
                  <img src="assets/images/client1.jpg" class="img-fluid testimonial-img" alt="client image">
                </div>
                <div class="message">
                  <span class="fa fa-quote-left" aria-hidden="true"></span>
                  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea sit id accusantium
                    officia quod quasi necessitatibus perspiciatis Harum error provident
                    quibusdam tenetur.</p>
                  <div class="name mt-4">
                    <h4>Isabella Mia</h4>
                    <p>Designation goes here</p>
                  </div>
                </div>
              </div>
            </div>
            <div class="item">
              <div class="slider-info mt-lg-4 mt-3">
                <div class="img-circle">
                  <img src="assets/images/client2.jpg" class="img-fluid testimonial-img" alt="client image">
                </div>
                <div class="message">
                  <span class="fa fa-quote-left" aria-hidden="true"></span>
                  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea sit id accusantium
                    officia quod quasi necessitatibus perspiciatis Harum error provident
                    quibusdam tenetur.</p>
                  <div class="name mt-4">
                    <h4>Benjamin Lucas</h4>
                    <p>Designation goes here</p>
                  </div>
                </div>
            </div>
            </div>
            <div class="item">
              <div class="slider-info mt-lg-4 mt-3">
                <div class="img-circle">
                  <img src="assets/images/client3.jpg" class="img-fluid testimonial-img" alt="client image">
                </div>
                <div class="message">
                  <span class="fa fa-quote-left" aria-hidden="true"></span>
                  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea sit id accusantium
                    officia quod quasi necessitatibus perspiciatis Harum error provident
                    quibusdam tenetur.</p>
                  <div class="name mt-4">
                    <h4>Oliver Bradley</h4>
                    <p>Designation goes here</p>
                  </div>
                </div>
              </div>
            </div>
            <div class="item">
              <div class="slider-info mt-lg-4 mt-3">
                <div class="img-circle">
                  <img src="assets/images/client4.jpg" class="img-fluid testimonial-img" alt="client image">
                </div>
                <div class="message">
                  <span class="fa fa-quote-left" aria-hidden="true"></span>
                  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea sit id accusantium
                    officia quod quasi necessitatibus perspiciatis Harum error provident
                    quibusdam tenetur.</p>
                  <div class="name mt-4">
                    <h4>William James</h4>
                    <p>Designation goes here</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
<section class="w3l-index5">
  <div class="new-block top-bottom">
    <div class="container">
      <div class="middle-section">
        <div class="section-width">
          <h5>Industrial Factory</h5>
          <h2>The biggest contribution of Ship industry to Humanity.</h2>
        </div>
        <div class="link-list-menu">
            <p class="mb-5">Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat explicabo nesciunt doloribus veniam asperiores voluptas harum, quis nisi ex voluptatum nemo ipsa nostrum rerum porro recusandae cumque delectus eius beatae.</p>
            <a href="about.html" class="btn btn-primary theme-button">Read More </a>
        </div>
      </div>
    </div>
  </div>
  </section>
<!-- blog with slider -->
<section class="w3l-blog-slider py-5" id="blog">
  <div class="container py-lg-4">
    <div class="header-section text-center">
      <h3>Latest blog post</h3>
      <p class="mt-3 mb-5">Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti sit labore dolores aliquam possimus deleniti cupiditate
        temporibus, repudiandae suscipit asperiores vel.</p>
    </div>
    <div class="inner-sec-w3layouts mt-md-5 mt-4">
      <div class="owl-three owl-carousel owl-theme">
        <div class="item">
          <div class="content-left-sec">
            <a class="blog-link d-block zoom-image" href="#blog-single.html"><img src="assets/images/img4.jpg" class="img-fluid scale-image" alt=""></a>
            <div class="blog-info">
              <a href="#blog-single.html">
                <h4 class="mb-0">Blog post title 1</h4>
              </a>
              <h6 class="mt-sm-2 mt-1">Dec 6th, 2020 -</h6>
              <a href="#blog-single.html" class="category">Industry</a>
              <p>Donec luctus rhoncus dignissim. Integer blandit mattis arcu, id viverra
                orci a.</p>
              <a href="#blog-single.html" class="btn btn-primary theme-button">Read More </a>
            </div>
          </div>
        </div>
        <div class="item">
          <div class="content-left-sec">
            <a class="blog-link d-block zoom-image" href="#blog-single.html"><img src="assets/images/img5.jpg" class="img-fluid scale-image" alt=""></a>
            <div class="blog-info">
              <a href="#blog-single.html">
                <h4 class="mb-0">Blog post title 2</h4>
              </a>
              <h6 class="mt-sm-2 mt-1">Dec 7th, 2020 -</h6>
              <a href="#blog-single.html" class="category">Industry</a>
              <p>Donec luctus rhoncus dignissim. Integer blandit mattis arcu, id viverra
                orci a.</p>
              <a href="#blog-single.html" class="btn btn-primary theme-button">Read More </a>
            </div>
          </div>
        </div>
        <div class="item">
          <div class="content-left-sec">
            <a class="blog-link d-block zoom-image" href="#blog-single.html"><img src="assets/images/img6.jpg" class="img-fluid scale-image" alt=""></a>
            <div class="blog-info">
              <a href="#blog-single.html">
                <h4 class="mb-0">Blog post title 3</h4>
              </a>
              <h6 class="mt-sm-2 mt-1">Dec 8th, 2020 -</h6>
              <a href="#blog-single.html" class="category">Industry</a>
              <p>Donec luctus rhoncus dignissim. Integer blandit mattis arcu, id viverra
                orci a.</p>
              <a href="#blog-single.html" class="btn btn-primary theme-button">Read More </a>
            </div>
          </div>
        </div>
        <div class="item">
          <div class="content-left-sec">
            <a class="blog-link d-block zoom-image" href="#blog-single.html"><img src="assets/images/img7.jpg" class="img-fluid scale-image" alt=""></a>
            <div class="blog-info">
              <a href="#blog-single.html">
                <h4 class="mb-0">Blog post title 4</h4>
              </a>
              <h6 class="mt-sm-2 mt-1">Dec 9th, 2020 -</h6>
              <a href="#blog-single.html" class="category">Industry</a>
              <p>Donec luctus rhoncus dignissim. Integer blandit mattis arcu, id viverra
                orci a.</p>
              <a href="#blog-single.html" class="btn btn-primary theme-button">Read More </a>
            </div>
          </div>
        </div>
        <div class="item">
          <div class="content-left-sec">
            <a class="blog-link d-block zoom-image" href="#blog-single.html"><img src="assets/images/img8.jpg" class="img-fluid scale-image" alt=""></a>
            <div class="blog-info">
              <a href="#blog-single.html">
                <h4 class="mb-0">Blog post title 5</h4>
              </a>
              <h6 class="mt-sm-2 mt-1">Dec 10th, 2020 -</h6>
              <a href="#blog-single.html" class="category">Industry</a>
              <p>Donec luctus rhoncus dignissim. Integer blandit mattis arcu, id viverra
                orci a.</p>
              <a href="#blog-single.html" class="btn btn-primary theme-button">Read More </a>
            </div>
          </div>
        </div>
        <div class="item">
          <div class="content-left-sec">
            <a class="blog-link d-block zoom-image" href="#blog-single.html"><img src="assets/images/img9.jpg" class="img-fluid scale-image" alt=""></a>
            <div class="blog-info">
              <a href="#blog-single.html">
                <h4 class="mb-0">Blog post title 6</h4>
              </a>
              <h6 class="mt-sm-2 mt-1">Dec 11th, 2020 -</h6>
              <a href="#blog-single.html" class="category">Industry</a>
              <p>Donec luctus rhoncus dignissim. Integer blandit mattis arcu, id viverra
                orci a.</p>
              <a href="#blog-single.html" class="btn btn-primary theme-button">Read More </a>
            </div>
          </div>
        </div>
        <div class="item">
          <div class="content-left-sec">
            <a class="blog-link d-block zoom-image" href="#blog-single.html"><img src="assets/images/img1.jpg" class="img-fluid scale-image" alt=""></a>
            <div class="blog-info">
              <a href="#blog-single.html">
                <h4 class="mb-0">Blog post title 7</h4>
              </a>
              <h6 class="mt-sm-2 mt-1">Dec 12th, 2020 -</h6>
              <a href="#blog-single.html" class="category">Industry</a>
              <p>Donec luctus rhoncus dignissim. Integer blandit mattis arcu, id viverra
                orci a.</p>
              <a href="#blog-single.html" class="btn btn-primary theme-button">Read More </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
<!-- //blog with slider -->
<!-- subscribe form -->
<section class="w3l-subscribe">
  <div class="main-w3 py-5">
    <div class="container py-lg-3">
      <div class="grids-forms text-center">
        <div class="row">
          <div class="col-md-12">
            <span class="fa fa-envelope mb-3" aria-hidden="true"></span>
            <div class="header-section white">
              <h3>Keep up to date - Get Email updates</h3>
              <p>Stay tuned for the latest company news.</p>
            </div>
          </div>
        </div>
        <div class="row mt-5">
        <div class="col-md-7 mx-auto main-midd-2">
          <form action="#" method="post" class="rightside-form">
            <input type="email" name="email" placeholder="Your Email Address.." required>
            <button type="submit" class="btn btn-primary theme-button">Subscribe</button>
          </form>
        </div>
        </div>
      </div>
    </div>
  </div>
</section>
<!-- //subscribe form -->
<section class="w3l-logos py-5">
  <div class="container py-lg-3">
    <div class="header-section text-center">
      <h3>Over 12k+ Companies trust us</h3>
      <p class="mt-3 mb-5">Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti sit labore dolores aliquam possimus deleniti cupiditate temporibus, repudiandae suscipit asperiores vel.</p>
    </div>
    <div class="row">
      <div class="col-lg-3 col-6 logo-view">
        <img src="assets/images/logo1.jpg" alt="company-logo" class="img-fluid" />
      </div>
      <div class="col-lg-3 col-6 logo-view">
        <img src="assets/images/logo2.jpg" alt="company-logo" class="img-fluid" />
      </div>
      <div class="col-lg-3 col-6 logo-view">
        <img src="assets/images/logo3.jpg" alt="company-logo" class="img-fluid" />
      </div>
      <div class="col-lg-3 col-6 logo-view">
        <img src="assets/images/logo4.jpg" alt="company-logo" class="img-fluid" />
      </div>
    </div>
    <div class="row mt-lg-4 mt-0">
      <div class="col-lg-3 col-6 logo-view">
        <img src="assets/images/logo3.jpg" alt="company-logo" class="img-fluid" />
      </div>
      <div class="col-lg-3 col-6 logo-view">
        <img src="assets/images/logo4.jpg" alt="company-logo" class="img-fluid" />
      </div>
      <div class="col-lg-3 col-6 logo-view">
        <img src="assets/images/logo1.jpg" alt="company-logo" class="img-fluid" />
      </div>
      <div class="col-lg-3 col-6 logo-view">
        <img src="assets/images/logo2.jpg" alt="company-logo" class="img-fluid" />
      </div>
    </div>
  </div>
</section>
<!-- footer -->
<footer class="w3l-footer-29-main" id="footer">
  <div class="footer-29 py-5">
    <div class="container pb-lg-3">
      <div class="row footer-top-29">
        <div class="col-lg-4 col-md-6 footer-list-29 footer-1 mt-md-4">
          <h1 class="footer-logo"><a class="footer-logo mb-md-3 mb-2" href="#url"><img src="assets/images/logo-icon.png" alt="" />Factory</a></h1>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste mollitia deserunt repudiandae, ut minus assumenda architecto illum eaque
            odio temporibus.</p>
        </div>
        <div class="col-lg-2 col-md-6 footer-list-29 footer-2 mt-5">
          <h6 class="footer-title-29">Explore More</h6>
          <ul>
            <li><a href="#gallery.html">Gallery</a></li>
            <li><a href="#blog.html">Blog</a></li>
            <li><a href="#landing-single.html">Landing Page</a></li>
            <li><a href="#url">Privacy Policy</a></li>
            <li><a href="#url">Terms and conditions</a></li>
          </ul>
        </div>
        <div class="col-lg-4 col-md-6 footer-list-29 footer-3 mt-5">
          <div class="properties">
            <h6 class="footer-title-29">Latest From Blog</h6>
            <a class="d-grid twitter-feed" href="#blog-single.html">
              <img src="assets/images/img4.jpg" class="img-fluid" alt="">
              <p>Industrial Factory Luxury Residence in Forest<br>
                <label class="small"><span class="fa fa-clock-o"></span> Jan 02, 2020</label>
              </p>
            </a>
            <a class="d-grid twitter-feed" href="#blog-single.html">
              <img src="assets/images/img6.jpg" class="img-fluid" alt="">
              <p>Industrial Factory Luxury Residence in Forest<br>
                <label class="small"><span class="fa fa-clock-o"></span> Feb 18, 2020</label></p>
            </a>
            <a class="d-grid twitter-feed" href="#blog-single.html">
              <img src="assets/images/img8.jpg" class="img-fluid" alt="">
              <p>Industrial Factory Luxury Residence in Forest<br>
                <label class="small"><span class="fa fa-clock-o"></span> Apr 08, 2020</label></p>
            </a>
          </div>
        </div>
        <div class="col-lg-2 col-md-6 footer-list-29 footer-4 mt-5">
          <h6 class="footer-title-29">Quick Links</h6>
          <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="about.html">About</a></li>
            <li><a href="services.html">Services</a></li>
            <li><a href="#blog.html"> Blog</a></li>
            <li><a href="contact.html">Contact</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <div id="footers14-block" class="py-3">
    <div class="container">
      <div class="footers14-bottom text-center">
        <div class="social">
          <a href="#facebook" class="facebook"><span class="fa fa-facebook" aria-hidden="true"></span></a>
          <a href="#google" class="google"><span class="fa fa-google-plus" aria-hidden="true"></span></a>
          <a href="#twitter" class="twitter"><span class="fa fa-twitter" aria-hidden="true"></span></a>
          <a href="#instagram" class="instagram"><span class="fa fa-instagram" aria-hidden="true"></span></a>
          <a href="#youtube" class="youtube"><span class="fa fa-youtube" aria-hidden="true"></span></a>
        </div>
        <div class="copyright mt-1">
          <p>Copyright &copy; 2020.Company name All rights reserved.</p>
        </div>
      </div>
    </div>
  </div>
  <!-- move top -->
  <button onclick="topFunction()" id="movetop" title="Go to top">
    <span class="fa fa-angle-up" aria-hidden="true"></span>
  </button>
  <script>
    // When the user scrolls down 20px from the top of the document, show the button
    window.onscroll = function () {
      scrollFunction()
    };
    function scrollFunction() {
      if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
        document.getElementById("movetop").style.display = "block";
      } else {
        document.getElementById("movetop").style.display = "none";
      }
    }
    // When the user clicks on the button, scroll to the top of the document
    function topFunction() {
      document.body.scrollTop = 0;
      document.documentElement.scrollTop = 0;
    }
  </script>
  <!-- /move top -->
</footer>
<!-- Footer -->
<!-- jQuery  -->
<script src="assets/js/jquery-3.4.1.slim.min.js"></script>
<!-- Template JavaScript -->
<script src="assets/js/owl.carousel.js"></script>
<!-- script for banner slider -->
<script>
  $(document).ready(function () {
    $('.owl-one').owlCarousel({
      loop: false,
      margin: 0,
      nav: false,
      responsiveClass: true,
      autoplay: true,
      autoplayTimeout: 5000,
      autoplaySpeed: 1000,
      autoplayHoverPause: false,
      responsive: {
        0: {
          items: 1,
          nav: false
        },
        480: {
          items: 1,
          nav: false
        },
        667: {
          items: 1,
          nav: true
        },
        1000: {
          items: 1,
          nav: true
        }
      }
    })
  })
</script>
<!-- //script banner slider  -->
<!-- script for testimonials -->
<script>
  $(document).ready(function () {
    $('.owl-two').owlCarousel({
      loop: true,
      margin: 0,
      nav: false,
      responsiveClass: true,
      autoplay: true,
      autoplayTimeout: 5000,
      autoplaySpeed: 1000,
      autoplayHoverPause: false,
      responsive: {
        0: {
          items: 1,
          nav: false
        },
        480: {
          items: 1,
          nav: false
        },
        667: {
          items: 1,
          nav: false
        },
        1000: {
          items: 1,
          nav: false
        }
      }
    })
  })
</script>
<!-- //testimonials owlcarousel -->
<!-- for blog carousel slider -->
<script>
  $(document).ready(function () {
    $('.owl-three').owlCarousel({
      loop: true,
      stagePadding: 30,
      margin: 30,
      autoplay: true,
      autoplayTimeout: 5000,
      autoplaySpeed: 1000,
      autoplayHoverPause: false,
      nav: false,
      responsive: {
        0: {
          items: 1
        },
        600: {
          items: 2
        },
        1000: {
          items: 3
        }
      }
    })
  })
</script>
<!-- //for blog carousel slider -->
<!-- disable body scroll which navbar is in active -->
<script>
  $(function () {
    $('.navbar-toggler').click(function () {
      $('body').toggleClass('noscroll');
    })
  });
</script>
<!-- disable body scroll which navbar is in active -->
<!-- stats number counter-->
<script src="assets/js/jquery.waypoints.min.js"></script>
<script src="assets/js/jquery.countup.js"></script>
<script>
  $('.counter').countUp();
</script>
<!-- //stats number counter -->
<!-- Bootstrap JS -->
<script src="assets/js/bootstrap.min.js"></script>
<style>
.copyrights{text-indent:-9999px;height:0;line-height:0;font-size:0;overflow:hidden;}
</style>
<div class="copyrights">
	Collect from <a href="http://www.51qianduan.com/"  title="网站模板">模板之家</a>
	<a href="https://www.51qianduan.com/"  title="查字典">查字典</a>
</div>



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


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

×
×
51前端

注册

×
绑定手机

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

×
单次下载支付

应付金额:279

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

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

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

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