Edit file File name : gated.html Content :<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Gated page</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;500;600&display=swap" rel="stylesheet"> <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> <link rel="stylesheet" href="style.css"> </head> <body> <a href="#" class="header-link"> <div class="header-link__container container"> Need multi-craft technicians? <img src="./assets/img/icons/arrow.svg" alt="img"> </div> </a> <header class="header"> <div class="header__fader header__fader--for-desk"></div> <div class="header__wrapper"> <div class="header__container container"> <div class="header__logo"> <a href="#"> <img src="./assets/img/logo.svg" alt="img"> </a> </div> <div class="header__fader js-menu-close"></div> <div class="header__nav"> <div class="header__close js-menu-close"> <button></button> </div> <ul class="header__menu"> <li class="header__item"> <a href="#">Solutions</a> <div class="header__submenu header__submenu--large"> <div class="header__left"> <h6>by need</h6> <div class="header__lists"> <ul> <li class="header__subitem header__subitem--main"> <a href="#"> <span>Industrial Maintenance <img src="./assets/img/icons/arrow-red.svg" alt="img"></span> Lorem ipsum dolor sit amet, consectetur adipiscing elit </a> </li> <li class="header__subitem"> <a href="#">Comprehensive Program </a> </li> <li class="header__subitem"> <a href="#">Workforce Program</a> </li> <li class="header__subitem"> <a href="#">Short-Term Support & Projects </a> </li> <li class="header__subitem header__subitem--red"> <a href="#">Get Support </a> </li> </ul> <ul> <li class="header__subitem header__subitem--main"> <a href="#"> <span>Industrial Technology<img src="./assets/img/icons/arrow-red.svg" alt="img"></span> Lorem ipsum dolor sit amet, consectetur adipiscing elit </a> </li> <li class="header__subitem"> <a href="#">Sensor Technology</a> </li> <li class="header__subitem"> <a href="#">Remote Monitoring & Analytics</a> </li> <li class="header__subitem header__subitem--red"> <a href="#">Get a Demo</a> </li> </ul> <ul> <li class="header__subitem header__subitem--main"> <a href="#"> <span>Industrial Parts <img src="./assets/img/icons/arrow-red.svg" alt="img"></span> Lorem ipsum dolor sit amet, consectetur adipiscing elit </a> </li> <li class="header__subitem"> <a href="#">Storeroom Management </a> </li> <li class="header__subitem"> <a href="#">Repairable Parts Management</a> </li> <li class="header__subitem"> <a href="#">Part Repair, Surplus & New </a> </li> <li class="header__subitem header__subitem--red"> <a href="#">Go to Industrial Store </a> </li> </ul> </div> </div> <div class="header__right"> <h6>by EXPERTISE</h6> <div class="header__lists"> <ul> <li class="header__subitem"> <a href="#">Predictive Maintenance </a> </li> <li class="header__subitem"> <a href="#">Preventive Maintenance</a> </li> <li class="header__subitem"> <a href="#">Technical Training</a> </li> <li class="header__subitem"> <a href="#">Maintenance Advisory</a> </li> <li class="header__subitem"> <a href="#">Machine Health Assessment</a> </li> <li class="header__subitem"> <a href="#">Calibration</a> </li> <li class="header__subitem"> <a href="#">Lubrication</a> </li> <li class="header__subitem"> <a href="#">Procurement & Supply Chain </a> </li> <li class="header__subitem"> <a href="#">Heat Treat</a> </li> <li class="header__subitem"> <a href="#">Crane & Hoist</a> </li> <li class="header__subitem"> <a href="#">Tool & Die</a> </li> </ul> </div> </div> </div> </li> <li class="header__item"> <a href="#">For Manufacturers</a> <div class="header__submenu"> <div class="header__left"> <h6>PROCESS & DISCRETE</h6> <div class="header__lists"> <ul> <li class="header__subitem"> <a href="#">Aerospace </a> </li> <li class="header__subitem"> <a href="#">Automotive </a> </li> <li class="header__subitem"> <a href="#">Building Products </a> </li> <li class="header__subitem"> <a href="#">Consumer Packaged Goods </a> </li> <li class="header__subitem"> <a href="#">Heavy Equipment </a> </li> <li class="header__subitem"> <a href="#">Paper & Pulp</a> </li> <li class="header__subitem"> <a href="#">Power Distribution </a> </li> <li class="header__subitem"> <a href="#">Tire & Rubber </a> </li> </ul> </div> </div> <div class="header__right"> <h6>DEPARTMENT & ROLE</h6> <div class="header__lists"> <ul> <li class="header__subitem"> <a href="#">Continuous Improvement</a> </li> <li class="header__subitem"> <a href="#">Engineering </a> </li> <li class="header__subitem"> <a href="#">Human Resources </a> </li> <li class="header__subitem"> <a href="#">Maintenance </a> </li> <li class="header__subitem"> <a href="#">Operations </a> </li> <li class="header__subitem"> <a href="#">Procurement & Supply Chain </a> </li> </ul> </div> </div> </div> </li> <li class="header__item"> <a href="#">Why ATS</a> <div class="header__submenu"> <div class="header__left"> <div class="header__lists"> <ul> <li class="header__subitem"> <a href="#">Safety Excellence </a> </li> <li class="header__subitem"> <a href="#">Skilled Technical Talent</a> </li> <li class="header__subitem"> <a href="#">Work Execution Management</a> </li> <li class="header__subitem"> <a href="#">Industry 4.0 Technologies</a> </li> <li class="header__subitem header__subitem--red"> <a href="#">Request Maintenance Assessment</a> </li> </ul> </div> </div> </div> </li> <li class="header__item"> <a href="#">Resources</a> <div class="header__submenu"> <div class="header__left"> <div class="header__lists"> <ul> <li class="header__subitem"> <a href="#">Customer Success </a> </li> <li class="header__subitem"> <a href="#">Trending Topics </a> </li> <li class="header__subitem"> <a href="#">Research & Thought Leadership </a> </li> <li class="header__subitem"> <a href="#">Solutions & Services </a> </li> <li class="header__subitem"> <a href="#">Industry Focused </a> </li> <li class="header__subitem header__subitem--red"> <a href="#">View All Resources</a> </li> </ul> </div> </div> </div> </li> <li class="header__item"> <a href="#">About</a> <div class="header__submenu"> <div class="header__left"> <div class="header__lists"> <ul> <li class="header__subitem"> <a href="#">Who We Are </a> </li> <li class="header__subitem"> <a href="#">Our Culture </a> </li> <li class="header__subitem"> <a href="#">Leadership </a> </li> <li class="header__subitem"> <a href="#">Careers </a> </li> <li class="header__subitem"> <a href="#">News & Press </a> </li> <li class="header__subitem header__subitem--red"> <a href="#">Let’s Talk</a> </li> </ul> </div> </div> </div> </li> </ul> <div class="header__references"> <div class="header__tel"> <a href="#"> <span>Let’s Talk</span> 866.315.8952 </a> </div> <div class="header__search"> <form action="#"> <div class="header__input"> <input id="input" type="text"> <div class="header__search-close"></div> </div> <div class="header__search-open"> <img src="./assets/img/icons/search.svg" alt="img"> </div> </form> </div> </div> </div> <div class="header__burger js-menu-toggle"> <span></span> <span></span> <span></span> </div> </div> </div> <div class="header__progress-container container"> <div class="header__progress-bar" id="myBar"></div> </div> </header> <main> <section class="form-with-text"> <div class="form-with-text__container container" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="100"> <div class="form-with-text__text"> <div class="form-with-text__top" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="100"> <h1>Let’s Talk</h1> <p> Erat curabitur a cursus vel vestibulum sed eu parturient justo ad vel condimentum hendrerit adipiscing elementum a iaculis senectus egestas at consectetur tempus venenatis dis. </p> </div> <div class="form-with-text__links" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="100"> <span>Lorem ipsum</span> <a href="#"> <img src="./assets/img/icons/tel.svg" alt="img"> <span>XXX.XXX.XXXX</span> </a> <span>Lorem ipsum</span> <a href="#"> <img src="./assets/img/icons/tel.svg" alt="img"> <span>XXX.XXX.XXXX</span> </a> </div> </div> <div class="form-with-text__form"> <form action="#"> <div class="field"> <input type="text" placeholder="First Name*"> </div> <div class="field"> <input type="text" placeholder="Last Name*"> </div> <div class="field field--two-column"> <input type="text" placeholder="Company*"> </div> <div class="field field--two-column"> <input type="tel" placeholder="Phone*"> </div> <div class="field field--two-column"> <input type="email" placeholder="Email*"> </div> <div class="field field--two-column"> <textarea placeholder="Message" rows="1"></textarea> </div> <button class="btn">Let’s Talk</button> </form> </div> </div> </section> <section class="flex-text-with-components"> <div class="flex-text-with-components__container container"> <div class="flex-text-with-components__flex"> <div class="flex-text-with-components__title" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="100"> <h2>Overview lorem ipsum dolore</h2> </div> <div class="flex-text-with-components__text" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="100"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam, purus sit amet luctus venenatis, lectus magna fringilla urna, porttitor rhoncus dolor purus non enim praesent elementum facilisis leo, vel fringilla est ullamcorper. </p> <p> Lorem ipsum dolor sit amet, consect etur adipiscing elit ut aliquam, purus sit amet luctus venenatis, lectus magna fringilla urna, porttitor rhoncus dolor. </p> </div> </div> <div class="flex-text-with-components__list"> <ul> <li class="list-item" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="100"> <div class="list-item__icon"> <img src="./assets/img/icons/tick.svg" alt="img"> </div> Lorem ipsum dolor sit amet, consectetur adipiscing elit </li> <li class="list-item" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="100"> <div class="list-item__icon"> <img src="./assets/img/icons/tick.svg" alt="img"> </div> Lorem ipsum dolor sit amet, consectetur adipiscing elit </li> <li class="list-item" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="100"> <div class="list-item__icon"> <img src="./assets/img/icons/tick.svg" alt="img"> </div> Lorem ipsum dolor sit amet, consectetur adipiscing elit </li> <li class="list-item" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="100"> <div class="list-item__icon"> <img src="./assets/img/icons/tick.svg" alt="img"> </div> Lorem ipsum dolor sit amet, consectetur adipiscing elit </li> </ul> </div> <div class="accordion"> <div class="accordion__title" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="100"> <h2>Corporate Offices</h2> </div> <div class="accordion__wrapper"> <div class="accordion__item" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="100"> <div class="accordion__header"> <div class="accordion__title-item"> <img src="./assets/img/icons/usa.svg" alt="img"> <h3>US Offices</h3> </div> <div class="accordion__button"> <button></button> </div> </div> <div class="accordion__content"> <ul class="accordion__list"> <li> <div class="accordion__list-left"> <h4>Location Name</h4> <a href="#" class="accordion__link"> XXX Address Lorem Ipsum <br> City, State XXXXX </a> <a href="#" class="accordion__link accordion__link--red"> <span> XXX Address Lorem Ipsum</span> XXX.XXX.XXXX </a> </div> <div class="accordion__list-right"> <img src="./assets/img/accordion/img1.jpg" alt="img"> </div> </li> <li> <div class="accordion__list-left"> <h4>Location Name</h4> <a href="#" class="accordion__link"> <span> XXX Address Lorem Ipsum</span> City, State XXXXX </a> <a href="#" class="accordion__link accordion__link--red"> <span>Get Directions</span> XXX.XXX.XXXX </a> </div> <div class="accordion__list-right"> <img src="./assets/img/accordion/img2.jpg" alt="img"> </div> </li> <li> <div class="accordion__list-left"> <h4>Location Name</h4> <a href="#" class="accordion__link"> <span> XXX Address Lorem Ipsum</span> City, State XXXXX </a> <a href="#" class="accordion__link accordion__link--red"> <span>Get Directions</span> XXX.XXX.XXXX </a> </div> <div class="accordion__list-right"> <img src="./assets/img/accordion/img3.jpg" alt="img"> </div> </li> </ul> </div> </div> <div class="accordion__item" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="100"> <div class="accordion__header"> <div class="accordion__title-item"> <img src="./assets/img/icons/mexico.svg" alt="img"> <h3>Mexico Office</h3> </div> <div class="accordion__button"> <button></button> </div> </div> <div class="accordion__content"> <ul class="accordion__list"> <li> <div class="accordion__list-left"> <h4>Location Name</h4> <a href="#" class="accordion__link"> XXX Address Lorem Ipsum <br> City, State XXXXX </a> <a href="#" class="accordion__link accordion__link--red"> <span> XXX Address Lorem Ipsum</span> XXX.XXX.XXXX </a> </div> <div class="accordion__list-right"> <img src="./assets/img/accordion/img1.jpg" alt="img"> </div> </li> <li> <div class="accordion__list-left"> <h4>Location Name</h4> <a href="#" class="accordion__link"> <span> XXX Address Lorem Ipsum</span> City, State XXXXX </a> <a href="#" class="accordion__link accordion__link--red"> <span>Get Directions</span> XXX.XXX.XXXX </a> </div> <div class="accordion__list-right"> <img src="./assets/img/accordion/img2.jpg" alt="img"> </div> </li> <li> <div class="accordion__list-left"> <h4>Location Name</h4> <a href="#" class="accordion__link"> <span> XXX Address Lorem Ipsum</span> City, State XXXXX </a> <a href="#" class="accordion__link accordion__link--red"> <span>Get Directions</span> XXX.XXX.XXXX </a> </div> <div class="accordion__list-right"> <img src="./assets/img/accordion/img3.jpg" alt="img"> </div> </li> </ul> </div> </div> <div class="accordion__item" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="100"> <div class="accordion__header"> <div class="accordion__title-item"> <img src="./assets/img/icons/UK.svg" alt="img"> <h3>UK Office </h3> </div> <div class="accordion__button"> <button></button> </div> </div> <div class="accordion__content"> <ul class="accordion__list"> <li> <div class="accordion__list-left"> <h4>Location Name</h4> <a href="#" class="accordion__link"> XXX Address Lorem Ipsum <br> City, State XXXXX </a> <a href="#" class="accordion__link accordion__link--red"> <span> XXX Address Lorem Ipsum</span> XXX.XXX.XXXX </a> </div> <div class="accordion__list-right"> <img src="./assets/img/accordion/img1.jpg" alt="img"> </div> </li> <li> <div class="accordion__list-left"> <h4>Location Name</h4> <a href="#" class="accordion__link"> <span> XXX Address Lorem Ipsum</span> City, State XXXXX </a> <a href="#" class="accordion__link accordion__link--red"> <span>Get Directions</span> XXX.XXX.XXXX </a> </div> <div class="accordion__list-right"> <img src="./assets/img/accordion/img2.jpg" alt="img"> </div> </li> <li> <div class="accordion__list-left"> <h4>Location Name</h4> <a href="#" class="accordion__link"> <span> XXX Address Lorem Ipsum</span> City, State XXXXX </a> <a href="#" class="accordion__link accordion__link--red"> <span>Get Directions</span> XXX.XXX.XXXX </a> </div> <div class="accordion__list-right"> <img src="./assets/img/accordion/img3.jpg" alt="img"> </div> </li> </ul> </div> </div> </div> </div> </div> </section> </main> <footer class="footer"> <div class="footer__container container"> <div class="footer__references" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="100"> <h6>solutions by need</h6> <a href="#" class="reference reference--white" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="100"> <div class="reference__title"> <h4>Industrial Maintenance </h4> </div> <div class="reference__arrow"> <img src="./assets/img/icons/arrow-red.svg" alt="img"> </div> </a> <a href="#" class="reference reference--white" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="100"> <div class="reference__title"> <h4>Industrial Technology </h4> </div> <div class="reference__arrow"> <img src="./assets/img/icons/arrow-red.svg" alt="img"> </div> </a> <a href="#" class="reference reference--white" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="100"> <div class="reference__title"> <h4>Industrial Parts </h4> </div> <div class="reference__arrow"> <img src="./assets/img/icons/arrow-red.svg" alt="img"> </div> </a> <div class="footer__box" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="100"> <div class="footer__logo"> <a href="#"> <img src="./assets/img/footer-logo.svg" alt="img"> </a> </div> <a href="#"> For Maintenance & Parts Inquiries <span>888.859.3080</span> </a> <a href="#"> For Careers, HR or Corporate Inquiries <span>866.315.8952</span> </a> <ul class="footer__social"> <li> <a href="#"> <img src="./assets/img/social/linkedin.svg" alt="img"> </a> </li> <li> <a href="#"> <img src="./assets/img/social/youtube.svg" alt="img"> </a> </li> <li> <a href="#"> <img src="./assets/img/social/facebook.svg" alt="img"> </a> </li> <li> <a href="#"> <img src="./assets/img/social/twitter.svg" alt="img"> </a> </li> <li> <a href="#"> <img src="./assets/img/social/instagram.svg" alt="img"> </a> </li> </ul> <div class="footer__copyright"> ©2022 Advanced Technology Services, Inc. <a href="#">Privacy Policy</a> | <a href="#">Sitemap</a> | <a href="#">Terms & Conditions</a> </div> </div> </div> <div class="footer__lists"> <div class="footer__list" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="100"> <h6>solutions by Expertise</h6> <ul> <li> <a href="#">Predictive Maintenance</a> </li> <li> <a href="#">Preventive Maintenance</a> </li> <li> <a href="#">Technical Training</a> </li> <li> <a href="#">Maintenance Advisory</a> </li> <li> <a href="#">Machine Health Assessment</a> </li> <li> <a href="#">Calibration</a> </li> <li> <a href="#">Lubrication</a> </li> <li> <a href="#">Procurement & Supply Chain </a> </li> <li> <a href="#">Heat Treat</a> </li> <li> <a href="#">Crane & Hoist</a> </li> <li> <a href="#">Tool & Die </a> </li> </ul> </div> <div class="footer__list" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="100"> <h6>WHY ATS</h6> <ul> <li> <a href="#">Safety Excellence</a> </li> <li> <a href="#">Skilled Technical Talent</a> </li> <li> <a href="#">Work Execution Management</a> </li> <li> <a href="#">Industry 4.0 Technologies</a> </li> <li> <a href="#">Request Maintenance Assessment</a> </li> </ul> </div> <div class="footer__list" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="100"> <h6>PROCESS & DISCRETE</h6> <ul> <li> <a href="#">Aerospace </a> </li> <li> <a href="#">Automotive </a> </li> <li> <a href="#">Building Products </a> </li> <li> <a href="#">Consumer Packaged Goods </a> </li> <li> <a href="#">Heavy Equipment </a> </li> <li> <a href="#">Paper & Pulp </a> </li> <li> <a href="#">Power Distribution </a> </li> <li> <a href="#">Tire & Rubber </a> </li> </ul> </div> <div class="footer__list" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="100"> <h6>resources</h6> <ul> <li> <a href="#">Customer Success </a> </li> <li> <a href="#">Trending Topics </a> </li> <li> <a href="#">Research & Thought Leadership </a> </li> <li> <a href="#">Solutions & Services </a> </li> <li> <a href="#">Industry Focused </a> </li> <li> <a href="#">View All Resources</a> </li> </ul> </div> <div class="footer__list" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="100"> <h6>DEPARTMENT & ROLE</h6> <ul> <li> <a href="#">Continuous Improvement</a> </li> <li> <a href="#">Engineering </a> </li> <li> <a href="#">Human Resources </a> </li> <li> <a href="#">Maintenance </a> </li> <li> <a href="#">Operations </a> </li> <li> <a href="#">Procurement & Supply Chain </a> </li> </ul> </div> <div class="footer__list" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="100"> <h6>ABOUT</h6> <ul> <li> <a href="#">Who We Are </a> </li> <li> <a href="#">Our Culture </a> </li> <li> <a href="#">Leadership </a> </li> <li> <a href="#">Careers </a> </li> <li> <a href="#">News & Press </a> </li> <li> <a href="#">Let’s Talk </a> </li> </ul> </div> </div> </div> </footer> <div id="modal-window" class="modal-window"> <div class="modal-window__fader"></div> <div id="modal-video" class="modal-window__item modal-window__video modal-video-item"> <button aria-label="close modal window" class="modal-video-item__close modal-window__close-icon"> </button> <div class="modal-video-item__wr-iframe"> <iframe src="" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </div> </div> </div> <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> <script src="js/main.js"></script> </body> </html>Save