industrie
index.html
<!-- Author: W3layouts Author URL: http://w3layouts.com --> <!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>Industrie an Industrial Category Bootstrap Responsive Template | Home :: W3layouts</title> <link href="//fonts.googleapis.com/css2?family=Barlow:ital,wght@0,300;0,600;0,700;1,400&display=swap" rel="stylesheet"> <!-- Template CSS --> <link rel="stylesheet" href="assets/css/style-starter.css"> </head> <body> <!--header--> <header id="site-header" class="fixed-top"> <div class="container"> <nav class="navbar navbar-expand-lg navbar-dark stroke"> <h1><a class="navbar-brand" href="index.html"> <span class="sub-log">In</span>dustrie </a></h1> <!-- 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 bg-gradient" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" 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> </span> </button> <div class="collapse navbar-collapse" id="navbarTogglerDemo02"> <ul class="navbar-nav mx-lg-auto"> <li class="nav-item active"> <a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="about.html">About</a> </li> <li class="nav-item"> <a class="nav-link" href="services.html">Services</a> </li> <li class="nav-item"> <a class="nav-link" href="contact.html">Contact</a> </li> <li class="top-quote ml-lg-4 mt-lg-0 mt-3"> <a href="contact.html" class="btn btn-style btn-primary">Get a Quote</a> </li> </ul> </div> <!-- toggle switch for light and dark theme --> <div class="mobile-position"> <nav class="navigation"> <div class="theme-switch-wrapper"> <label class="theme-switch" for="checkbox"> <input type="checkbox" id="checkbox"> <div class="mode-container py-1"> <i class="gg-sun"></i> <i class="gg-moon"></i> </div> </label> </div> </nav> </div> <!-- //toggle switch for light and dark theme --> </nav> </div> </header> <!--/header--> <!-- main-slider --> <section class="w3l-main-slider" id="home"> <div class="companies20-content"> <div class="owl-one owl-carousel owl-theme"> <div class="item"> <li> <div class="slider-info banner-view bg bg2"> <div class="banner-info"> <div class="container"> <div class="banner-info-bg"> <h5>Provide Effective Building Services</h5> <p class="mt-4 pr-lg-4">Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit quisquam, doloremque placeat aut numquam ipsam. </p> <a class="btn btn-style btn-primary mt-sm-5 mt-4 mr-2" href="about.html"> About Us</a> <a class="btn btn-style btn-white mt-sm-5 mt-4" href="contact.html"> Contact Us</a> </div> </div> </div> </div> </li> </div> <div class="item"> <li> <div class="slider-info banner-view banner-top1 bg bg2"> <div class="banner-info"> <div class="container"> <div class="banner-info-bg"> <h5>Provide Effective Building Solutions</h5> <p class="mt-4 pr-lg-4">Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit quisquam, doloremque placeat aut numquam ipsam. </p> <a class="btn btn-style btn-primary mt-sm-5 mt-4 mr-2" href="about.html"> About Us</a> <a class="btn btn-style btn-white mt-sm-5 mt-4" href="contact.html"> Contact Us</a> </div> </div> </div> </div> </li> </div> <div class="item"> <li> <div class="slider-info banner-view banner-top2 bg bg2"> <div class="banner-info"> <div class="container"> <div class="banner-info-bg"> <h5>Provide Effective Building Services</h5> <p class="mt-4 pr-lg-4">Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit quisquam, doloremque placeat aut numquam ipsam. </p> <a class="btn btn-style btn-primary mt-sm-5 mt-4 mr-2" href="about.html"> About Us</a> <a class="btn btn-style btn-white mt-sm-5 mt-4" href="contact.html"> Contact Us</a> </div> </div> </div> </div> </li> </div> <div class="item"> <li> <div class="slider-info banner-view banner-top3 bg bg2"> <div class="banner-info"> <div class="container"> <div class="banner-info-bg"> <h5>Provide Effective Building Solutions</h5> <p class="mt-4 pr-lg-4">Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit quisquam, doloremque placeat aut numquam ipsam. </p> <a class="btn btn-style btn-primary mt-sm-5 mt-4 mr-2" href="about.html"> About Us</a> <a class="btn btn-style btn-white mt-sm-5 mt-4" href="contact.html"> Contact Us</a> </div> </div> </div> </div> </li> </div> </div> <div class="arrow-downhny"> <a href="#about" class="arrow-down text-center position-absolute"> <span class="arrow-down-icon"> <span class="fa fa-arrow-down"></span> </span> </a> </div> </div> </section> <!-- /main-slider --> <!--/grids--> <section class="w3l-grids-3 py-5" id="about"> <div class="container py-md-5 py-3"> <div class="row bottom-ab-grids align-items-center"> <div class="col-lg-6 bottom-ab-left"> <h6 class="sub-titlehny">About Our Company</h6> <h3 class="hny-title">An inspired approach to quality residential and commercial projects </h3> <p class="my-3"> Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla mollis dapibus nunc, ut rhoncus turpis sodales quis. Integer sit amet mattis quam.</p> </div> <div class="col-lg-6 bottom-ab-right mt-lg-0 mt-3 pl-lg-4"> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur hic odio voluptatem tenetur consequatur.</p> <p class="mt-3"> Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla mollis dapibus nunc, ut rhoncus turpis sodales quis. Integer sit amet mattis quam.</p> </div> </div> <div class="row bottom_grids pt-md-3 text-left"> <div class="col-lg-4 col-md-6 mt-5"> <div class="grid-block"> <a href="#" class="d-block p-lg-4 p-3"> <span class="fa fa-cubes" aria-hidden="true"></span> <h4 class="my-3">Construction Management</h4> <p class="">Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur hic odio voluptatem tenetur consequatur.</p> </a> </div> </div> <div class="col-lg-4 col-md-6 mt-5"> <div class="grid-block"> <a href="#" class="d-block p-lg-4 p-3"> <span class="fa fa-building-o" aria-hidden="true"></span> <h4 class="my-3">Architecture & building</h4> <p class="">Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur hic odio voluptatem tenetur consequatur.</p> </a> </div> </div> <div class="col-lg-4 col-md-6 mt-5"> <div class="grid-block"> <a href="#" class="d-block p-lg-4 p-3"> <span class="fa fa-podcast" aria-hidden="true"></span> <h4 class="my-3">Owner's Representation</h4> <p class="">Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur hic odio voluptatem tenetur consequatur.</p> </a> </div> </div> </div> </div> </section> <!--//grids--> <!--/w3l-faq-block--> <div class="w3l-cwp4-sec py-5"> <div class="container py-md-5 py-3"> <div class="cwp4-two row align-items-center"> <div class="cwp4-text col-lg-6"> <h6 class="sub-titlehny">Industry Corporation!</h6> <h3 class="hny-title">Best A Grade Commercial & Residential Services</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicingelit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud. </p> <ul class="cont-4 mt-lg-5 mt-4"> <li><span class="fa fa-check-circle-o"></span> Quality Control System, 100% Satisfaction Guarantee</li> <li><span class="fa fa-check-circle-o"></span> Highly Professional Staff, Accurate Testing Processes</li> <li><span class="fa fa-check-circle-o"></span> Unrivalled workmanship, Professional and Qualified</li> </ul> </div> <div class="cwp4-image col-lg-6 pl-lg-5 mt-lg-0 mt-5"> <img src="assets/images/1.jpg" class="img-fluid" alt=""> </div> </div> </div> </div> <!--//w3l-faq-block--> <section class="w3l-portfolio-8 py-5"> <div class="portfolio-main py-md-5 py-3"> <div class="container"> <div class="header-section text-center mx-auto"> <h6 class="sub-titlehny">View Projects</h6> <h3 class="hny-title">Latest Projects</h3> <p class="my-3"> Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla mollis dapibus nunc, ut rhoncus turpis sodales quis. Integer sit amet mattis quam.</p> </div> <div class="row galler-top mt-lg-5 mt-4"> <div class="col-md-4 protfolio-item hover14"> <a href="assets/images/7.jpg" data-lightbox="example-set" class="mb-4" data-title="lorem ipsum dolor sit amet"> <figure> <img src="assets/images/7.jpg" alt="product" class="img-fluid"> </figure> </a> <a href="assets/images/1.jpg" data-lightbox="example-set" class="mb-md-0 mb-4" data-title="lorem ipsum dolor sit amet"> <figure> <img src="assets/images/1.jpg" alt="product" class="img-fluid"> </figure> </a> </div> <div class="col-md-4 protfolio-item hover14"> <a href="assets/images/2.jpg" data-lightbox="example-set" class="mb-4" data-title="lorem ipsum dolor sit amet"> <figure> <img src="assets/images/2.jpg" alt="product" class="img-fluid"> </figure> </a> <a href="assets/images/3.jpg" data-lightbox="example-set" class="mb-md-0 mb-4" data-title="lorem ipsum dolor sit amet"> <figure> <img src="assets/images/3.jpg" alt="product" class="img-fluid"> </figure> </a> </div> <div class="col-md-4 protfolio-item hover14"> <a href="assets/images/4.jpg" data-lightbox="example-set" class="mb-4" data-title="lorem ipsum dolor sit amet"> <figure> <img src="assets/images/4.jpg" alt="product" class="img-fluid"> </figure> </a> <a href="assets/images/5.jpg" data-lightbox="example-set" data-title="lorem ipsum dolor sit amet"> <figure> <img src="assets/images/5.jpg" alt="product" class="img-fluid"> </figure> </a> </div> </div> </div> </div> </section> <!--//projects--> <!-- stats --> <section class="w3l-stats py-lg-5 py-5" id="stats"> <div class="gallery-inner container py-md-5 py-3"> <div class="row stats-con"> <div class="col-lg-3 col-6 stats_info counter_grid"> <span class="fa fa-laptop"></span> <p class="counter">1200</p> <h4>Projects & Residentials Completed in 2020</h4> </div> <div class="col-lg-3 col-6 stats_info counter_grid1"> <span class="fa fa-users"></span> <p class="counter">2120</p> <h4>Qualified Employees & Workers With Us</h4> </div> <div class="col-lg-3 col-6 stats_info counter_grid mt-lg-0 mt-5"> <span class="fa fa-trophy"></span> <p class="counter">1012</p> <h4>Satisfied Clients We Served Globally</h4> </div> <div class="col-lg-3 col-6 stats_info counter_grid2 mt-lg-0 mt-5"> <span class="fa fa-smile-o"></span> <p class="counter">60</p> <h4>Years Of Experience In The Industry</h4> </div> </div> </div> </section> <!-- //stats --> <!--/w3l-faq-block--> <div class="w3l-faq-block py-5" id="faq"> <div class="container py-lg-4"> <div class="row mt-5"> <div class="col-lg-6"> <div class="faq-image"> <img src="assets/images/2.jpg" class="img-fluid" alt=""> </div> </div> <div class="col-lg-6 mt-lg-0 mt-5 pl-lg-5"> <h6 class="sub-titlehny">FaQs</h6> <h3 class="hny-title"> Experts with experience </h3> <p class="my-3"> Vestibulum ante ipsum primis in faucibus orci luctus turpis sodales quis. Integer sit amet mattis quam.</p> <section class="w3l-faq mt-5" id="faq"> <div class="faq-page"> <ul> <li> <input type="checkbox" checked> <i></i> <h4>Sed ut perspiciatis unde omnis?</h4> <p>Sit amet consectetur adipisicing elit. Voluptates amet earum velit nobis aliquam laboriosam nihil debitis animi vitae eos nisi laudantium. Tempore reiciendis ipsam culpa, qui voluptates eveniet, incidunt officiis eaque iste minima autem.</p> </li> <li> <input type="checkbox" checked> <i></i> <h4>At vero eos iusto odio ducimus qui?</h4> <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptates amet earum velit nobis aliquam laboriosam nihil quasi fuga, ad corrupti libero omnis sapiente non assumenda excepturi aperiam animi vitae eos nisi laudantium. Tempore reiciendis ipsam culpa, qui voluptates eveniet, incidunt officiis eaque iste minima autem.</p> </li> <li> <input type="checkbox" checked> <i></i> <h4>We denounce with righteous?</h4> <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptates amet earum velit nobis aliquam laboriosam nihil debitis facere voluptatibus consectetur quae quasi fuga, ad corrupti libero omnis sapiente non assumenda excepturi aperiam iste minima autem.</p> </li> </ul> </div> </section> </div> </div> </div> </div> <!--//w3l-faq-block--> <!--/w3l-bottom--> <section class="w3l-bottom py-5"> <div class="container py-md-4 py-3 text-center"> <div class="header-section text-center mx-auto"> <h3 class="hny-title">We Help Build On Past & Prepare<br> For Your Future. </h3> <p class="my-3 px-lg-5"> Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla mollis dapibus nunc, ut rhoncus turpis sodales quis. Integer sit amet mattis quam.Integer sit amet mattis quam.</p> </div> <div class="buttons mt-5"> <a href="about.html" class="btn btn-style btn-primary mr-2">Read More</a> <a href="contact.html" class="btn btn-style btn-secondary ml-2">Get a quote</a> </div> </div> </section> <!--//w3l-bottom--> <!--//w3l-footer-29-main--> <section class="w3l-footer-29-main"> <div class="footer-29 py-5"> <div class="container py-lg-4"> <div class="row footer-top-29"> <div class="footer-list-29 col-lg-4"> <h6 class="footer-title-29">About Company</h6> <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quaerat, repellat. Accusantium quos ea doloribus? A sed beatae sapiente commodi nam ipsum dolor set. </p> <div class="main-social-footer-29 mt-4"> <a href="#facebook" class="facebook"><span class="fa fa-facebook"></span></a> <a href="#twitter" class="twitter"><span class="fa fa-twitter"></span></a> <a href="#instagram" class="instagram"><span class="fa fa-instagram"></span></a> <a href="#linkedin" class="linkedin"><span class="fa fa-linkedin"></span></a> </div> </div> <div class="col-lg-2 col-md-6 col-sm-4 footer-list-29 footer-2 mt-lg-0 mt-5"> <ul> <h6 class="footer-title-29">Useful Links</h6> <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 posts</a></li> <li><a href="contact.html">Contact us</a></li> </ul> </div> <div class="col-lg-3 col-md-6 footer-list-29 footer-3 mt-lg-0 mt-5"> <ul> <h6 class="footer-title-29">Services</h6> <li><a href="#team">Construction Manage</a></li> <li><a href="#insta">Architecture & Building</a></li> <li><a href="#tiling">Tiling & Painiting</a></li> <li><a href="#careers">Build Contracts</a></li> <li><a href="#help">Help & Support</a></li> </ul> </div> <div class="col-lg-3 col-md-6 col-sm-8 footer-list-29 footer-1 mt-lg-0 mt-5"> <h6 class="footer-title-29">Contact Us</h6> <ul> <li> <p><span class="fa fa-map-marker"></span> Industrie, #49436 block, #888 Honey rd Newyork</p> </li> <li><a href="tel:+7-800-999-800"><span class="fa fa-phone"></span> +(21)-255-999-8888</a></li> <li><a href="mailto:industrie@mail.com" class="mail"><span class="fa fa-envelope-open-o"></span> industrie@mail.com</a></li> </ul> </div> <div class="col-lg-12 footer-list-29 footer-4 mt-5"> <div class="column1 align-self"> <h6 class="footer-title-29 mb-1">Subscribe to our Newsletter </h6> <p>Enter your email and receive the latest news from us.</p> </div> <div class="column1"> <form action="#" class="subscribe" method="post"> <input type="email" name="email" placeholder="Your Email Address" required=""> <button><span class="fa fa-paper-plane-o pr-1"></span></button> </form> </div> </div> </div> </div> </div> </section> <section class="w3l-footer-29-main w3l-copyright"> <div class="container"> <div class="bottom-copies"> <p class="copy-footer-29 text-center">© 2020 Industrie. All rights reserved. Design by <a href="https://w3layouts.com/" target="_blank"> W3Layouts</a></p> </div> </div> <!-- move top --> <button onclick="topFunction()" id="movetop" title="Go to top"> <span class="fa fa-angle-up"></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 --> </section> <!-- Template JavaScript --> <script src="assets/js/jquery-3.3.1.min.js"></script> <!-- script for testimonials --> <script> $(document).ready(function () { $('.owl-testimonial').owlCarousel({ loop: true, margin: 0, nav: true, 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 for testimonials --> <script src="assets/js/theme-change.js"></script> <!-- js for portfolio lightbox --> <!-- libhtbox --> <script src="assets/js/lightbox-plus-jquery.min.js"></script> <!-- libhtbox --> <script src="assets/js/owl.carousel.js"></script> <!-- script for banner slider--> <script> $(document).ready(function () { $('.owl-one').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: true }, 1000: { items: 1, nav: true } } }) }) </script> <!-- //script --> <!-- 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 --> <!-- 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 --> <!--/MENU-JS--> <script> $(window).on("scroll", function () { var scroll = $(window).scrollTop(); if (scroll >= 80) { $("#site-header").addClass("nav-fixed"); } else { $("#site-header").removeClass("nav-fixed"); } }); //Main navigation Active Class Add Remove $(".navbar-toggler").on("click", function () { $("header").toggleClass("active"); }); $(document).on("ready", function () { if ($(window).width() > 991) { $("header").removeClass("active"); } $(window).on("resize", function () { if ($(window).width() > 991) { $("header").removeClass("active"); } }); }); </script> <!--//MENU-JS--> <script src="assets/js/bootstrap.min.js"></script> </body> </html>
PROCESAR
THEME
<!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>Industrie an Industrial Category Bootstrap Responsive Template | Home :: W3layouts</title> <link href="//fonts.googleapis.com/css2?family=Barlow:ital,wght@0,300;0,600;0,700;1,400&display=swap" rel="stylesheet"> <!-- Template CSS --> <link rel="stylesheet" href="assets/css/style-starter.css">
ASIGNAR HEAD
LIMPIAR