digicorp
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>Digi Corp - Business Category Bootstrap Responsive Website Template - Home : W3layouts</title> <!-- Google fonts --> <link href="//fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap" rel="stylesheet"> <link href="//fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet"> <link href="//fonts.googleapis.com/css2?family=Lato:wght@300;400;700&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 stroke px-0"> <h1> <a class="navbar-brand" href="index.html"> <span class="fa fa-flask"></span> Digi Corp </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> </button> <div class="collapse navbar-collapse" id="navbarTogglerDemo02"> <ul class="navbar-nav ml-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> <!--/search-right--> <div class="search-right mx-lg-3"> <a href="#search" title="search"><span class="fa fa-search" aria-hidden="true"></span></a> <!-- search popup --> <div id="search" class="pop-overlay"> <div class="popup"> <form action="error.html" method="GET" class="search-box"> <input type="search" placeholder="Enter Keyword" name="search" required="required" autofocus=""> <button type="submit" class="btn"><span class="fa fa-search" aria-hidden="true"></span></button> </form> </div> <a class="close" href="#close">×</a> </div> <!-- /search popup --> </div> <!--//search-right--> <div class="box-support ml-lg-3 mr-lg-4"> <p>For Support Call <span class="fa fa-headphones"></span></p> <h5><a href="tel:121-345-6789">121-345-6789</a></h5> </div> </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"> <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--> <!-- banner section --> <section id="home" class="w3l-banner py-5"> <div id="particles-js"></div> <div class="container py-lg-5 py-md-4"> <div class="align-items-center py-4"> <div class="banner-content mt-5"> <h3 class="mb-2">We are a global experience digital agency.</h3> <h3 class="">We develop <span>digital strategies.</span></h3> </div> </div> </div> </section> <!-- //banner section --> <!-- home page block1 --> <section id="about" class="home-services py-5"> <div class="container py-lg-3"> <div class="row"> <div class="col-lg-4 col-sm-6"> <div class="box-wrap"> <div class="box-wrap-grid"> <img src="assets/images/icon1.png" alt="" /> <div class="info"> <p>CALL TODAY</p> <h4><a href="tel: +12 311 4567">+12 311 4567</a></h4> </div> </div> </div> </div> <div class="col-lg-4 col-sm-6 mt-sm-0 mt-4"> <div class="box-wrap"> <div class="box-wrap-grid"> <img src="assets/images/icon2.png" alt="" /> <div class="info"> <p>FAX US </p> <h4><a href="tel: +12 311 4567">+12 311 4567</a></h4> </div> </div> </div> </div> <div class="col-lg-4 col-sm-6 mt-lg-0 mt-4"> <div class="box-wrap"> <div class="box-wrap-grid"> <img src="assets/images/icon3.png" alt="" /> <div class="info"> <p>EMAIL US</p> <h4><a href="emailto:info@mail.com">info@mail.com</a></h4> </div> </div> </div> </div> </div> </div> </section> <!-- //home page block1 --> <section class="w3l-content-4 py-5"> <div class="content-4-main py-lg-5 py-md-4"> <div class="container pb-5"> <h3 class="title-small mx-0 mb-5">Design and development of digital products</h3> <div class="content-info-in row"> <div class="content-left col-lg-6"> <p class=""> We focus on the needs of every small to middle market businesses to improve and grow their return. lacinia id erat eu ullam corper. Nunc id ipsum fringilla, gravida felis vitae. lacinia id, sunt in culpa quis lacinia. Lorem ipsum dolor, sit amet init elit. Eos, debitis doler et in.</p> <a href="#discover" class="btn btn-style btn-primary mt-md-5 mt-4">Get in touch</a> </div> <div class="content-right col-lg-6 mt-lg-0 mt-5"> <p> We focus on the needs of every small to middle market businesses to improve and grow their return. lacinia id erat eu ullam corper. Nunc id ipsum fringilla, gravida felis vitae. lacinia id, sunt in culpa quis lacinia. Lorem ipsum dolor, sit amet init elit. Eos, debitis. gravida felis vitae. lacinia id, sunt in culpa quis. Lorem ipsum dolor sit amet</p> </div> </div> </div> </div> </section> <!-- home page block --> <section class="home-grids" id="features"> <div class="container"> <div class="row bg-color-white"> <div class="col-lg-4 col-md-6 col-sm-12"> <div class="box-wrap"> <div class="box-grid"> <img src="assets/images/icon1.png" alt="" /> <div class="info"> <h4 class="title-small">Development</h4> </div> </div> <p class="mt-4 pt-2">Lorem, ipsum dolor sit amet conse adipi sicing elit. Illum, aliquam?</p> </div> </div> <div class="col-lg-4 col-md-6 col-sm-12"> <div class="box-wrap border-grid"> <div class="box-grid"> <img src="assets/images/icon2.png" alt="" /> <div class="info"> <h4 class="title-small">Integration</h4> </div> </div> <p class="mt-4 pt-2">Lorem, ipsum dolor sit amet conse adipi sicing elit. Illum, aliquam?</p> </div> </div> <div class="col-lg-4 col-md-6 col-sm-12"> <div class="box-wrap"> <div class="box-grid"> <img src="assets/images/icon3.png" alt="" /> <div class="info"> <h4 class="title-small">Responsibility</h4> </div> </div> <p class="mt-4 pt-2">Lorem, ipsum dolor sit amet conse adipi sicing elit. Illum, aliquam?</p> </div> </div> </div> </div> </section> <!-- //home page block --> <!--/w3l-bottom--> <section class="w3l-bottom1 py-5"> <div class="container py-md-5 py-sm-4 py-2"> <div class="row"> <div class="col-lg-8"> <div class="bottom-info"> <div class="header-section"> <h3 class="title-big">Unleash Your Team’s Productive <span> Power </span></h3> <p class="mt-3 pr-lg-5">Lorem ipsum dolor sit amet elit. Velit beatae rem ullam dolore nisi esse quasi. Integer sit amet .Lorem ipsum dolor sit amet elit.</p> </div> </div> </div> <div class="col-lg-4 align-self text-lg-right"> <a href="contact.html" class="btn btn-style btn-outline-primary mt-md-5 mt-4">Get in touch</a> </div> </div> </section> <!--//w3l-bottom--> <section class="w3l-progressblock py-5" id="why"> <div class="container py-lg-5 py-sm-4 py-2"> <div class="row"> <div class="col-lg-6 about-right-faq"> <h3 class="title-big">Why Choose <span>Us?</span></h3> <p class="mt-lg-4 mt-3 mb-lg-5 mb-4">Lorem ipsum viverra feugiat. Pellen tesque libero ut justo, ultrices in ligula. Lorem ipsum dolor sit amet elit. Non quae, fugiat ad.</p> <div class="progress-info info1"> <h6 class="progress-tittle">Quality Services <span class="">80%</span></h6> <div class="progress"> <div class="progress-bar progress-bar-striped" role="progressbar" style="width: 80%" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"> </div> </div> </div> <div class="progress-info info2"> <h6 class="progress-tittle">Team’s Productive Power <span class="">95%</span> </h6> <div class="progress"> <div class="progress-bar progress-bar-striped" role="progressbar" style="width: 95%" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100"> </div> </div> </div> <div class="progress-info info3"> <h6 class="progress-tittle">Projects complated <span class="">75%</span></h6> <div class="progress"> <div class="progress-bar progress-bar-striped" role="progressbar" style="width: 75%" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100"> </div> </div> </div> </div> <div class="col-lg-6 stats mt-lg-0 mt-4 pl-lg-5 align-self"> <div class="row"> <div class="col-6 stat"> <span class="fa fa-folder-open-o"></span> <div class="stats-info"> <span class="number">560</span> <h4>Projects Done</h4> </div> </div> <div class="col-6 stat"> <span class="fa fa-user-o"></span> <div class="stats-info"> <span class="number">350+</span> <h4>Partners</h4> </div> </div> <div class="col-6 stat"> <span class="fa fa-building-o"></span> <div class="stats-info"> <span class="number">1200+</span> <h4>Companies</h4> </div> </div> <div class="col-6 stat"> <span class="fa fa-smile-o"></span> <div class="stats-info"> <span class="number">15k+</span> <h4>Happy clinents</h4> </div> </div> </div> </div> </div> </div> </section> <div class="w3l-bg-image"> <div class="bg-mask py-5"> <div class="container py-lg-5 py-4"> <div class="text-align text-center py-lg-4 py-md-3"> <h3 class="title-big">Amazing Videos and <span>Presentations</span> </h3> <p class="mt-4">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p> <a class="btn btn-style btn-primary mt-sm-5 mt-4 mr-sm-2" href="#learn"> Learn More</a> <a class="btn btn-style btn-outline-primary mt-sm-5 mt-4" href="contact.html"> Contact Us</a> </div> </div> </div> </div> <!-- testimonials --> <section class="w3l-clients-1" id="testimonials"> <!-- /grids --> <div class="cusrtomer-layout py-5"> <div class="container py-lg-5 py-md-4"> <div class="heading align-self text-center"> <h3 class="title-big mb-md-5 mb-4">What People <span>Say</span></h3> </div> <!-- /grids --> <div class="testimonial-row"> <div id="owl-demo1" class="owl-two owl-carousel owl-theme mb-md-3 mb-5"> <div class="item"> <div class="testimonial-content"> <div class="testimonial"> <div class="test-img"> <img src="assets/images/team1.jpg" class="img-fluid" alt="client-img"> </div> <blockquote> <q>Lorem ipsum dolor sit amet int consectetur adipisicing elit. Velita beatae laudantium Quas minima sunt natus tempore, maiores aliquid modi felis vitae facere aperiam sequi optio lacinia id ipsum non velit, culpa. voluptate rem ullam dolore nisi est quasi, doloribus tempora. </q> </blockquote> <div class="testi-des"> <div class="peopl align-self"> <h3>Dennis wilson</h3> <p class="indentity">Company CEO </p> </div> </div> </div> </div> </div> <div class="item"> <div class="testimonial-content"> <div class="testimonial"> <div class="test-img"><img src="assets/images/team2.jpg" class="img-fluid" alt="client-img"> </div> <blockquote> <q>Lorem ipsum dolor sit amet int consectetur adipisicing elit. Velita beatae laudantium Quas minima sunt natus tempore, maiores aliquid modi felis vitae facere aperiam sequi optio lacinia id ipsum non velit, culpa. voluptate rem ullam dolore nisi est quasi, doloribus tempora.</q> </blockquote> <div class="testi-des"> <div class="peopl align-self"> <h3>Tommy sakura</h3> <p class="indentity">Administrator </p> </div> </div> </div> </div> </div> <div class="item"> <div class="testimonial-content"> <div class="testimonial"> <div class="test-img"><img src="assets/images/team3.jpg" class="img-fluid" alt="client-img"> </div> <blockquote> <q>Lorem ipsum dolor sit amet int consectetur adipisicing elit. Velita beatae laudantium Quas minima sunt natus tempore, maiores aliquid modi felis vitae facere aperiam sequi optio lacinia id ipsum non velit, culpa. voluptate rem ullam dolore nisi est quasi, doloribus tempora.</q> </blockquote> <div class="testi-des"> <div class="peopl align-self"> <h3>Roy Linderson</h3> <p class="indentity">Digital marketer</p> </div> </div> </div> </div> </div> <div class="item"> <div class="testimonial-content"> <div class="testimonial"> <div class="test-img"><img src="assets/images/team4.jpg" class="img-fluid" alt="client-img"> </div> <blockquote> <q>Lorem ipsum dolor sit amet int consectetur adipisicing elit. Velita beatae laudantium Quas minima sunt natus tempore, maiores aliquid modi felis vitae facere aperiam sequi optio lacinia id ipsum non velit, culpa. voluptate rem ullam dolore nisi est quasi, doloribus tempora.</q> </blockquote> <div class="testi-des"> <div class="peopl align-self"> <h3>Mike Thyson</h3> <p class="indentity">App Developer</p> </div> </div> </div> </div> </div> </div> </div> </div> <!-- /grids --> </div> <!-- //grids --> </section> <!-- //testimonials --> <!--/Blog-Posts--> <section class="w3l-blog py-5" id="blog"> <div class="container"> <div class="inner-sec-w3ls py-lg-5 py-md-4 py-2"> <!--/services-grids--> <div class="row blog-sec"> <div class="col-lg-4 manager-img mb-lg-0 mb-md-5 mb-4"> <h3 class="title-big">Checkout our latest news, blog posts and <span>Updates</span></h3> <p class="mt-4">Integer pulvinar leo id. libero ut justo, semper at tempus vel, ultrices ipsum ligula. Nullae sollicit udin velit. semper at vel.</p> <div class="author-info mt-4"> <div class="author-img"> <img src="assets/images/team1.jpg" alt="" class="img-fluid"> </div> <img src="assets/images/signature.png" alt="" class="img-fluid img1"> </div> </div> <div class="col-lg-4 col-md-6 about-in blog-grid-info text-left"> <div class="card img"> <div class="card-body img"> <a href="#blog-single" class="d-block"> <img src="assets/images/blog1.jpg" alt="" class="img-fluid radius-image"> </a> <div class="blog-des mt-4"> <h5 class="card-title mb-2"><a href="#blog-single">Global equity report 2020</a></h5> <ul class="admin-post mb-3"> <li> <span class="fa fa-user-o"></span><a href="#admin"> by Admin</a> </li> <li> <p><span class="fa fa-clock-o"></span> Oct 31, 2020</p> </li> <li> <a href="#comments"><span class="fa fa-comments-o"></span> 3</a> </li> </ul> <p class="card-text">Nulla eu elementum quam. magna purus, nec. semper at vel, ipsum dolor et init. </p> </div> </div> </div> </div> <div class="col-lg-4 col-md-6 about-in blog-grid-info text-left mt-md-0 mt-5"> <div class="card img"> <div class="card-body img"> <a href="#blog-single" class="d-block"> <img src="assets/images/blog3.jpg" alt="" class="img-fluid radius-image"> </a> <div class="blog-des mt-3"> <h5 class="card-title mt-4"><a href="#blog-single">Development of products</a></h5> <ul class="admin-post mb-3"> <li> <span class="fa fa-user-o"></span><a href="#admin"> by Admin</a> </li> <li> <p><span class="fa fa-clock-o"></span> Oct 31, 2020</p> </li> <li> <a href="#comments"><span class="fa fa-comments-o"></span> 3</a> </li> </ul> <p class="card-text">Nulla eu elementum quam. magna purus, nec. semper at vel, ipsum dolor et init. </p> </div> </div> </div> </div> </div> </div> </div> </section> <!--//Blog-Posts--> <!-- home page newsletter --> <section class="w3l-bottom py-5" id="subscribe"> <div class="container py-lg-4 py-2"> <div class="subscribe"> <div class="row"> <div class="col-lg-5 header-section mx-auto"> <h3 class="title-big"> Stay Always<span> In Touch</span></h3> <p class="mt-2"> Get our latest news straight into your inbox</p> </div> <div class="col-lg-7 mt-lg-0 mt-4 align-self"> <form action="#" method="post" class="subscribe-wthree"> <div class="d-md-flex flex-wrap subscribe-wthree-field"> <input class="form-control" type="email" placeholder="Enter your email..." name="email" required=""> <button class="btn btn-style btn-primary" type="submit"> <span class="fa fa-paper-plane"></span> </button> </div> </form> </div> </div> </div> </div> </section> <!-- //home page newsletter --> <!-- footer --> <footer class="py-5"> <div class="container py-md-3"> <div class="footer-grids"> <div class="footer-grid left"> <h2 class="logo"><a href="index.html"><span class="fa fa-flask"></span> Digi corp</a></h2> </div> <div class="middle"> <p>© 2020 Digi corp. All Rights Reserved | Design by <a href="http://www.W3Layouts.com" target="_blank">W3layouts</a></p> </div> <div class="right"> <ul class="social"> <li><a href="#url"><span class="fa fa-facebook icon_facebook"></span></a></li> <li><a href="#url"><span class="fa fa-twitter icon_twitter"></span></a></li> <li><a href="#url"><span class="fa fa-linkedin icon_linkedin"></span></a></li> <li><a href="#url"><span class="fa fa-dribbble icon_dribbble"></span></a></li> </ul> </div> </div> </div> <!-- move top --> <button onclick="topFunction()" id="movetop" title="Go to top"> ⤴ </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 --> <!-- Common jquery plugin --> <!-- responsive tabs --> <script src="assets/js/jquery-1.9.1.min.js"></script> <script src="assets/js/easyResponsiveTabs.js"></script> <!--Plug-in Initialisation--> <script type="text/javascript"> $(document).ready(function () { //Horizontal Tab $('#parentHorizontalTab').easyResponsiveTabs({ type: 'default', //Types: default, vertical, accordion width: 'auto', //auto or any width like 600px fit: true, // 100% fit in a container tabidentify: 'hor_1', // The tab groups identifier activate: function (event) { // Callback function if tab is switched var $tab = $(this); var $info = $('#nested-tabInfo'); var $name = $('span', $info); $name.text($tab.text()); $info.show(); } }); }); </script> <script src="assets/js/theme-change.js"></script><!-- theme switch js (light and dark)--> <script src="assets/js/jquery.magnific-popup.min.js"></script> <script> $(document).ready(function () { $('.popup-with-zoom-anim').magnificPopup({ type: 'inline', fixedContentPos: false, fixedBgPos: true, overflowY: 'auto', closeBtnInside: true, preloader: false, midClick: true, removalDelay: 300, mainClass: 'my-mfp-zoom-in' }); $('.popup-with-move-anim').magnificPopup({ type: 'inline', fixedContentPos: false, fixedBgPos: true, overflowY: 'auto', closeBtnInside: true, preloader: false, midClick: true, removalDelay: 300, mainClass: 'my-mfp-slide-bottom' }); }); </script> <script src="assets/js/particles.js"></script> <script> particlesJS("particles-js", { "particles": { "number": { "value": 80, "density": { "enable": true, "value_area": 800 } }, "color": { "value": "#ffffff" }, "shape": { "type": "circle", "stroke": { "width": 0, "color": "#000000" }, "polygon": { "nb_sides": 5 } }, "opacity": { "value": 0.5, "random": false, "anim": { "enable": false, "speed": 1, "opacity_min": 0.1, "sync": false } }, "size": { "value": 3, "random": true, "anim": { "enable": false, "speed": 40, "size_min": 0.1, "sync": false } }, "line_linked": { "enable": true, "distance": 150, "color": "#ffffff", "opacity": 0.4, "width": 1 }, "move": { "enable": true, "speed": 6, "direction": "none", "random": true, "straight": false, "out_mode": "out", "bounce": false, "attract": { "enable": false, "rotateX": 600, "rotateY": 1200 } } }, "interactivity": { "detect_on": "canvas", "events": { "onhover": { "enable": true, "mode": "grab" }, "onclick": { "enable": true, "mode": "push" }, "resize": true }, "modes": { "grab": { "distance": 140, "line_linked": { "opacity": 1 } }, "bubble": { "distance": 400, "size": 40, "duration": 2, "opacity": 8, "speed": 3 }, "repulse": { "distance": 200, "duration": 0.4 }, "push": { "particles_nb": 4 }, "remove": { "particles_nb": 2 } } }, "retina_detect": true }); </script> <script src="assets/js/owl.carousel.js"></script><!-- owl carousel --> <!-- script for tesimonials carousel slider --> <script> $(document).ready(function () { $("#owl-demo1").owlCarousel({ loop: true, margin: 20, nav: false, responsiveClass: true, responsive: { 0: { items: 1, nav: false }, 1000: { items: 1, nav: false, loop: false } } }) }) </script> <!-- //script for tesimonials carousel slider --> <!--/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--> <!-- 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 --> <!--bootstrap--> <script src="assets/js/bootstrap.min.js"></script> <!-- //bootstrap--> </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>Digi Corp - Business Category Bootstrap Responsive Website Template - Home : W3layouts</title> <!-- Google fonts --> <link href="//fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap" rel="stylesheet"> <link href="//fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet"> <link href="//fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap" rel="stylesheet"> <!-- Template CSS --> <link rel="stylesheet" href="assets/css/style-starter.css">
ASIGNAR HEAD
LIMPIAR