Edit file File name : index.html Content :<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>TrackActive</title> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/> <link rel="stylesheet" href="css/style.css"> </head> <body> <section class="header-custom"> <div class="container-head"> <div class="wr-header-custom"> <a href="#" class="logo"><img src="images/logo_white.svg" alt="logo" height="28"></a> <a href="#" class="custom-button-to desk-visible">TrackActive for Business <img src="images/next%20(1).svg" alt="right" height="10"></a> <a href="#" class="custom-button-to desk-hidden">For Business<img src="images/next%20(1).svg" alt="right" height="10"></a> </div> </div> </section> <section class="info-block" style="background-image: url(images/main-bg-header.jpg)"> <div class="container"> <div class="main-flex-info"> <div class="text-info"> <h3>Physical Health <span>done the right way</span> </h3> <p>Get evidence-based physical health platform to keep you healthy, pain-free and productive</p> <a href="#" class="ios-download"><img src="images/itunes-app-store-logo.svg" alt="app" height="50"></a> </div> <div class="image-info"> <img src="images/image-telephon-1.png" alt="main"> </div> </div> </div> </section> <section class="content-bg-main"> <div class="container"> <div class="main-flex-info reverse-flex"> <div class="text-info width-second-text"> <div class="icon-text"> <img data-src="images/icon_machine@1x.svg" alt="icon" height="45" class="lazy"> </div> <h3>Personalized help from AI ChatBot </h3> <p>You will get your exercise-based treatment or prevention plan based on your current and past musculoskeletal conditions, and your overall health and exercise habits</p> <a href="#" class="ios-download"><img data-src="images/itunes-app-store-logo.svg" alt="app" height="50" class="lazy"></a> </div> <div class="image-info image-1-position"> <img src="images/group-telephone-sec-2.png" alt="main"> </div> </div> <div class="main-flex-info"> <div class="text-info width-second-text"> <div class="icon-text"> <img data-src="images/icon_expert.svg" alt="icon" height="45" class="lazy"> </div> <h3>Built by clinicians </h3> <p>We are work with world renowned physiotherapists and specialists in sport, exercise medicine that develop our clinical algorithms and specialised information and advice</p> <a href="#" class="ios-download"><img src="images/itunes-app-store-logo.svg" alt="app" height="50"></a> </div> <a href="#" class="image-info image-2-position open-modal" data-modal="#modal1"> <img src="images/video-group.png" alt="main"> </a> </div> <div class="main-flex-info reverse-flex"> <div class="text-info width-second-text"> <div class="icon-text"> <img data-src="images/icon_adapt.svg" alt="icon" height="45" class="lazy"> </div> <h3>Self-Managed </h3> <p>Self-management and prevention programs are designed for completion at the home or office and therefore assist with adherence</p> <a href="#" class="ios-download"><img data-src="images/itunes-app-store-logo.svg" alt="app" height="50" class="lazy"></a> </div> <div class="image-info image-1-position"> <img src="images/group-telephone.png" alt="main"> </div> </div> </div> <div class="abs-bg-1"> <img src="images/main-bg.svg" alt="bg"> </div> </section> <section class="no-bg" style="background-image: url(images/oval-blue-fot.svg)"> <div class="container"> <div class="main-flex-info"> <div class="text-info width-second-text"> <div class="icon-text"> <img data-src="images/icon_care.svg" alt="icon" height="45" class="lazy"> </div> <h3>We adapt as you progress </h3> <p>Get personalised advice and exercise programs that adapts as you progress based on your musculoskeletal conditions and exercise habits</p> <a href="#" class="ios-download"><img data-src="images/itunes-app-store-logo.svg" alt="app" height="50" class="lazy"></a> </div> <div class="image-info image-2-position"> <img data-src="images/progress-telephone.png" alt="main" class="lazy"> </div> </div> </div> </section> <div class="wr-plan"> <div class="container"> <div class="text-info width-second-text"> <div class="icon-text"> <img data-src="images/icon-plan.svg" alt="icon" height="45" class="lazy"> </div> <h3>Choose your plan </h3> <p>Get <span>7 days free trial</span> when you select any plan</p> </div> </div> </div> <section class="bg-footer-section"> <div class="plan-wr"> <div class="container"> <div class="price-flex"> <div class="price-main month-price"> <p class="year">MONTHLY</p> <h3>£ 9.99</h3> <p class="month">per month</p> <p class="only">Only £4.99/month</p> <a href="#" class="price">Select plan now</a> <p class="require">Requiring monthly payment. If you cancel within 7 days you will not be charged</p> </div> <div class="price-main"> <p class="year">YEARLY</p> <h3>£ 59.99</h3> <p class="month">per year</p> <p class="only">Only £4.99/month</p> <a href="#" class="price">Select plan now</a> <p class="require">Requiring monthly payment. If you cancel within 7 days you will not be charged</p> <div class="abs-image"> <img data-src="images/best-value.svg" alt="Best Value" height="179" class="lazy"> </div> </div> </div> </div> </div> <div class="say-wr"> <div class="container"> <div class="tittle-say"> <img data-src="images/icon_heart.svg" alt="heart" height="45" class="lazy"> <h3>What our users say</h3> </div> <div class="wr-slider-main"> <div class="first-slider"> <div class="text-slide"> <p>«Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus id metus pellentesque, semper felis at, congue tellus. Aenean accumsan felis in imperdiet consectetur»</p> </div> <div class="text-slide"> <p>«Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus id metus pellentesque, semper felis at, congue tellus. Aenean accumsan felis in imperdiet consectetur»</p> </div> <div class="text-slide"> <p>«Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus id metus pellentesque, semper felis at, congue tellus. Aenean accumsan felis in imperdiet consectetur»</p> </div> <div class="text-slide"> <p>«Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus id metus pellentesque, semper felis at, congue tellus. Aenean accumsan felis in imperdiet consectetur»</p> </div> <div class="text-slide"> <p>«Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus id metus pellentesque, semper felis at, congue tellus. Aenean accumsan felis in imperdiet consectetur»</p> </div> <div class="text-slide"> <p>«Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus id metus pellentesque, semper felis at, congue tellus. Aenean accumsan felis in imperdiet consectetur»</p> </div> <div class="text-slide"> <p>«Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus id metus pellentesque, semper felis at, congue tellus. Aenean accumsan felis in imperdiet consectetur»</p> </div> </div> <div class="wr-slider-second"> <div class="second-slider"> <div class="image-slide"> <img data-src="images/image-slider.jpg" alt="slide" class="lazy"> <p>My Name</p> </div> <div class="image-slide"> <img data-src="images/image-slider-2.jpg" alt="slide" class="lazy"> <p>Marcus</p> </div> <div class="image-slide"> <img data-src="images/image-slider.jpg" alt="slide" class="lazy"> <p>My Name</p> </div> <div class="image-slide"> <img data-src="images/image-slider-4.jpg" alt="slide" class="lazy"> <p>My Name</p> </div> <div class="image-slide"> <img data-src="images/image-slider-5.jpg" alt="slide" class="lazy"> <p>My Name</p> </div> <div class="image-slide"> <img data-src="images/image-slider-5.jpg" alt="slide" class="lazy"> <p>My Name</p> </div> </div> <div class="arrow-left"><img data-src="images/right.svg" alt="arrow" height="32" class="lazy"></div> <div class="arrow-right"><img data-src="images/right.svg" alt="arrow" height="32" class="lazy"></div> </div> </div> </div> <div class="abs-image-2"> <img data-src="images/blue-oval.svg" alt="oval" height="263" class="lazy"> </div> <div class="abs-bg"> <img data-src="images/bg-footer.svg" alt="bg" height="1358" class="lazy"> </div> </div> </section> <section class="health"> <div class="container"> <div class="main-flex-info"> <div class="text-info width-100-blue"> <div class="icon-text"> <img data-src="images/logo-trackactive.svg" alt="icon" height="45" class="lazy"> </div> <h3>Your health journey starts here </h3> <p>Get evidence-based physical health platform to keep you healthy, pain-free and productive</p> <a href="#" class="ios-download"><img data-src="images/itunes-app-store-logo.svg" alt="app" height="50" class="lazy"></a> </div> <div class="image-info"> <img data-src="images/image-women.png" alt="main" class="lazy"> </div> </div> </div> </section> <section class="pre-footer"> <div class="container-head"> <div class="wr-flex-pre-footer"> <div class="flex-visible"> <a href="#" class="logo"><img data-src="images/logo_white.svg" alt="logo" height="28" class="lazy"></a> <a href="#" class="custom-button-to">For Business<img data-src="images/next%20(1).svg" alt="right" height="10" class="lazy"></a> </div> <div class="flex-ul-a"> <ul class="menu-footer"> <li><a href="#" class="link-custom">About us</a></li> <li><a href="#" class="link-custom">Privacy policy</a></li> <li><a href="#" class="link-custom">Terms of service</a></li> </ul> <a href="#" class="custom-button-to">For Business<img data-src="images/next%20(1).svg" alt="right" height="10" class="lazy"></a> </div> </div> </div> </section> <section class="footer"> <div class="container-head"> <div class="flex-footer"> <p>© 2019 Active Health Tech Ltd</p> <ul class="icon-footer"> <li><a href="#"><img data-src="images/twitter-logo-on-black-background.svg" height="32" alt="Twitter" class="lazy"></a></li> <li><a href="#"><img data-src="images/linkedin-logo.svg" height="32" alt="Linkedin" class="lazy"></a></li> <li><a href="#"><img data-src="images/facebook-app-logo.svg" height="32" alt="facebook" class="lazy"></a></li> </ul> </div> </div> </section> <div class='modal' id='modal1'> <div class='content'> <iframe width="600" height="400" data-src="https://www.youtube.com/embed/HBlsqI8ZaXI" frameborder="0" allow="autoplay; accelerometer; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </div> </div> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.lazy/1.7.9/jquery.lazy.min.js"></script> <script src="js/common.js"></script> </body> </html>Save