Edit file File name : about-safety.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>About Safety 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="banner"> <div class="banner__img"> <img src="./assets/img/hero/about.jpg" alt="img" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="100"> </div> <div class="banner__wrapper"> <div class="container"> <div class="banner__box" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="100"> <div class="banner__text" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="100"> <h1>Safety Excellence</h1> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam, purus sit amet luctus venenatis, lectus magna fringill. </p> </div> <div class="banner__btn"> <a href="#" class="btn">Learn More</a> </div> </div> </div> </div> </section> <section class="flex-text-with-components flex-text-with-components--without-back"> <div class="flex-text-with-components__container container"> <div class="logos logos--without-padding" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="100"> <h6>Trusted by</h6> <div class="logos__flex"> <div class="logos__item"> <img src="./assets/img/logos/logo1.png" alt="img"> </div> <div class="logos__item"> <img src="./assets/img/logos/logo2.png" alt="img"> </div> <div class="logos__item"> <img src="./assets/img/logos/logo7.png" alt="img"> </div> <div class="logos__item"> <img src="./assets/img/logos/logo4.png" alt="img"> </div> <div class="logos__item"> <img src="./assets/img/logos/logo5.png" alt="img"> </div> <div class="logos__item"> <img src="./assets/img/logos/logo9.png" alt="img"> </div> </div> </div> <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> <a href="#" data-video-src="https://www.youtube.com/embed/sjkrrmBnpGE" class="play">Play video lorem<img src="./assets/img/icons/play.svg" alt="img"></a> </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> </section> <section class="text-with-list-onback change-width text-with-list-onback--reversed" style="--width: 0%"> <div class="text-with-list-onback__container container"> <div class="text-with-list-onback__main" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="100"> <div class="text-with-list-onback__text" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="100"> <h2> Key callout lorem ipsum dolore set consectetur </h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam, purus sit amet luctus venenatis, lectus magna fringilla urna, porttitor </p> </div> <ul class="text-with-list-onback__list" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="100"> <li> <div class="text-with-list-onback__icon"> <img src="./assets/img/list/predict.svg" alt="img"> </div> <div class="text-with-list-onback__item-content"> <h6>Lorem ipsum </h6> <p> Lorem ipsum dolor sit amet consectetur adipiscing elit, sed do eiusmod </p> </div> </li> <li> <div class="text-with-list-onback__icon"> <img src="./assets/img/list/analyze.svg" alt="img"> </div> <div class="text-with-list-onback__item-content"> <h6>Lorem ipsum </h6> <p> Lorem ipsum dolor sit amet consectetur adipiscing elit, sed do eiusmod </p> </div> </li> <li> <div class="text-with-list-onback__icon"> <img src="./assets/img/list/respond.svg" alt="img"> </div> <div class="text-with-list-onback__item-content"> <h6>Lorem ipsum</h6> <p> Lorem ipsum dolor sit amet consectetur adipiscing elit, sed do eiusmod </p> </div> </li> </ul> </div> <div class="text-with-list-onback__bottom container" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="100"> <div class="text-with-list-onback__bottom-content"> <div class="text-with-list-onback__quote"> <q> “Testimonial lorem ispum Impact statement dolor sit amet, consectetur adipiscing elit ut aliquam, purus sit” </q> </div> <div class="text-with-list-onback__quote-author"> – Leading Global Manufacturer </div> </div> </div> </div> <div class="text-with-list-onback__img"> <img src="./assets/img/full-img.jpg" alt="img"> </div> </section> <section class="accordion-section"> <div class="accordion-section__container container "> <div class="accordion"> <div class="accordion__title" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="100"> <h2>Benefits/features lorem ipsum</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"> <h3>Lorem ipsum dolor sit amet consectetur dolor </h3> </div> <div class="accordion__button"> <button></button> </div> </div> <div class="accordion__content"> <div class="accordion__text"> <p> Lorem ipsum dolor sit amet consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore aute irure dolor in reprehenderit in voluptate velit esse cillum. </p> </div> </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"> <h3>Lorem ipsum dolor sit amet consectetur dolor </h3> </div> <div class="accordion__button"> <button></button> </div> </div> <div class="accordion__content"> <div class="accordion__text"> <p> Lorem ipsum dolor sit amet consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore aute irure dolor in reprehenderit in voluptate velit esse cillum. </p> </div> </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"> <h3>Lorem ipsum dolor sit amet consectetur dolor </h3> </div> <div class="accordion__button"> <button></button> </div> </div> <div class="accordion__content"> <div class="accordion__text"> <p> Lorem ipsum dolor sit amet consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore aute irure dolor in reprehenderit in voluptate velit esse cillum. </p> </div> </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"> <h3>Lorem ipsum dolor sit amet consectetur dolor </h3> </div> <div class="accordion__button"> <button></button> </div> </div> <div class="accordion__content"> <div class="accordion__text"> <p> Lorem ipsum dolor sit amet consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore aute irure dolor in reprehenderit in voluptate velit esse cillum. </p> </div> </div> </div> </div> </div> </div> </section> <section class="news-section"> <div class="news-section__container container"> <div class="news-section__wrapper"> <a href="#" class="news" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="100"> <div class="news__img"> <img src="./assets/img/categories/img1.jpg" alt="img"> </div> <div class="news__content"> <h3>Lorem Ipsum Dolore</h3> <p> Lorem ipsum dolor sit amet consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore aute irure dolor in reprehenderit in voluptate </p> <div class="news__btn"> <img src="./assets/img/icons/arrow-red.svg" alt="img"> </div> </div> </a> <a href="#" class="news" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="100"> <div class="news__img"> <img src="./assets/img/categories/img4.jpg" alt="img"> </div> <div class="news__content"> <h3>Lorem Ipsum Dolore</h3> <p> Lorem ipsum dolor sit amet consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore aute irure dolor in reprehenderit in voluptate </p> <div class="news__btn"> <img src="./assets/img/icons/arrow-red.svg" alt="img"> </div> </div> </a> </div> </div> </section> <section class="form change-width" style="--width: 0%"> <div class="form__container container"> <div class="form__wrapper" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="100"> <h2>Let’s Talk</h2> <div class="form__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"> <input type="text" placeholder="Company*"> </div> <div class="field"> <input type="tel" placeholder="Phone*"> </div> <div class="field"> <input type="email" placeholder="Email*"> </div> <div class="field field--two-column"> <textarea placeholder="Message" rows="1"></textarea> </div> <div class="field"> <button class="btn">Submit</button> </div> </form> </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