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