Edit file File name : index.html Content :<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name ="title" content="CarTest, everyone’s new car match-maker!"> <meta name="keywords" content="Test Drive, Car Test, Hyundai, Ford, Honda, Volvo, BMW, Mercedes-Benz, Porsche, Kia, Audi"> <meta name="description" content="TheCarTest is an automotive marketplace that provides new car buyers with access to trusted mobility advice. Buyers can select from a short list of cars that they love for a 3-7 day 'try before you buy’ test drive experience. Our Swipe'n’Drive match maker brings the emotion back into the decision-making process but with a unique brand-to-buyer connection. The ability to aggregate real-time data within an “offline” environment is a ground-breaking opportunity for OEM’s and car dealers who can promote preferential price points allowing them to individually target and incentivise customers within the buying process."> <title>TheCarTest</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.7.1/slick.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.7.1/slick-theme.min.css"> <link rel="stylesheet" href="styles/bootstrap.min.css"> <link rel="stylesheet" href="styles/styles.css"> <script async type="text/javascript"> var loadFinished = function() { var aText = new Array("why not try before you buy?"); var iSpeed = 100; // time delay of print out var iIndex = 0; // start printing array at this posision var iArrLength = aText[0].length; // the length of the text array var iScrollAt = 20; // start scrolling up at this many lines var iTextPos = 0; // initialise text position var sContents = ''; // initialise contents variable var iRow; // initialise current row function typewriter1() { sContents = ' '; iRow = Math.max(0, iIndex - iScrollAt); var destination = document.getElementById("typedtext"); while (iRow < iIndex) { sContents += aText[iRow++] + '<br />'; } destination.innerHTML = sContents + aText[iIndex].substring(0, iTextPos); if (iTextPos++ == iArrLength) { iTextPos = 0; iIndex++; if (iIndex != aText.length) { iArrLength = aText[iIndex].length; setTimeout(function () { typewriter1(); }, 500); } } else { setTimeout(function () { typewriter1(); }, iSpeed); } } typewriter1(); } </script> </head> <body onload="loadFinished()"> <header class="container-fluid top-fluid"> <!--navbar--> <nav class="navbar navbar-default"> <div class="container-fluid fluid-nav-inner"> <div class="container"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header hidden-xs"> <a class="navbar-brand" href="#"> <img src="img/logo.png" alt="logo"> </a> </div> <div class="navbar-header hidden-sm hidden-md hidden-lg"> <a class="navbar-brand" href="#"> <img src="img/logo.png" alt="logo"> </a> </div> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <span class="logo-numbers pull-left hidden-xs">1300.879.828</span> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav navbar-right cl-effect-5"> <li><a href="#about" class="text-uppercase"><span data-hover="About">About</span></a></li> <li><a href="#howworks" class="text-uppercase"><span data-hover="How it works">How it works</span></a></li> <li><a href="#brands" class="text-uppercase"><span data-hover="Brands">Brands</span></a></li> <li><a href="#press" class="text-uppercase"><span data-hover="Press">Press</span></a></li> <li><a href="#contact" class="text-uppercase"><span data-hover="Contact">Contact</span></a></li> </ul> <span class="clearfix"></span> </div><!-- /.navbar-collapse --> </div> </div><!-- /.container-fluid --> </nav> <!--navbar--> </header> <!-- Indicators --> <div id="myCarousel" class="carousel fade" data-ride="carousel" data-interval="15000"> <!-- Wrapper for slides --> <div class="carousel-inner" role="listbox"> <div class="item item-top active"> <div class="container-fluid fluid-in slider-img-1"> <div class="container carousel-caption-own text-left"> <h3 class="text-uppercase" id="typedtext"></h3> </div> </div> </div> <div class="item item-top"> <div data-src="img/slider2.jpg" class="container-fluid fluid-in slider-2 slider-img-2 lazy-30"> <div class="container carousel-caption-own text-left"> <h3 class="text-uppercase">test drive from 3-7 days</h3> </div> </div> </div> <div class="item item-top"> <div data-src="img/slider3.jpg" class="container-fluid fluid-in slider-3 slider-img-3 lazy-31"> <div class="container carousel-caption-own text-left"> <h3 class="text-uppercase">delivered to your home or office</h3> </div> </div> </div> <div class="item item-top"> <div data-src="img/slider4.jpg" class="container-fluid fluid-in slider-4 slider-img-4 lazy-32"> <div class="container carousel-caption-own text-left"> <h3 class="text-uppercase maker">everyone's new car match-maker</h3> </div> </div> </div> <a class="right carousel-control right-control" href="#myCarousel" role="button" data-slide="next"> <span class="fa fa-angle-right" aria-hidden="true"></span> <div class="slide-numbers"> <p class="current-point">01</p> <p class="next-point">02</p> </div> <img src="img/arrow-dark.png" alt="next" class="hidden-xs"> <img src="img/arrow-dark-small.png" alt="next" class="hidden-sm hidden-md hidden-lg"> <span class="sr-only">Next</span> <div class="clearfix"></div> </a> </div> <!-- right control --> </div> <div class="grey-divider top-div"></div> <article class="container-fluid article-fluid"> <div class="container container-first"> <div class="after-slider-title wow fadeInUp"> <h5 class="text-uppercase" id="about" >cartest - the best way to choose the perfect car</h5> <h2 class="text-uppercase title-b">why not try before you buy?</h2> </div> <div class="row row-car"> <div class="col-md-5 col-sm-5 hidden-xs col-car-img wow fadeInUp"> <div class="img-cartest"></div> </div> <div class="col-md-6 col-sm-7 col-xs-12 col-padd-left wow fadeInUp"> <p class="p-car-1">There’s always a first date, and if all goes well a few more before you commit to being in a relationship. We think buying a new car is a pretty big commitment but simply driving it around the block doesn’t give you the time needed to see if it’s the right fit for your lifestyle. At the Cartest we encourage you to Try Before You Buy offering 3 to 7 day test drives on your choice of vehicle with home or office delivery included.</p> <p class="p-car-1">We guide you through the car buying process with a unique touch and feel experience providing transparency from start to finish. Once you’ve made your decision we supply you with a Cartest preferential price available only at your local dealership. If you purchase the car within 30 days you’ll receive back any money spent on the Cartest service. So let us help you find your perfect match today and sign up to hear more.</p> </div> <div class="col-md-offset-1"></div> </div> </div> </article> <div class="grey-divider div-padd"></div> <div class="container-fluid fluid-first-dark"> <div class="container"> <!-- video --> <div class="video-container"> <div class="overlap-image wow fadeInUpBig"> <img data-src="img/video.jpg" class="img-responsive lazy-1" /> <div class="video-title-wrapper wow fadeInUp"> <div class="video-title"> <div class="vert-divider"></div> <div class="video-text"> <div class="v-title">CarTest is all about finding the right fit for your drive.</div> </div> </div> </div> </div> <iframe id="video" data-loader="iframe" data-src="https://www.youtube.com/embed/tFWmgueI0A8?&modestbranding=1&rel=0" class="lazy-2" width="854" height="480" frameborder="0" allowfullscreen></iframe> <div class="video-control-wrapper"> <div class="play wow fadeInLeft"> <img data-src="img/play.png" alt="play" class="lazy-3"> </div> <div class="text-controls"> <p class="simple-text text-uppercase wow fadeInDown">Watch the video</p> <p class="time-control wow fadeInUp">04:57</p> </div> </div> </div> <!-- video --> <div id="howworks"></div> <div class="row row-partners-logo step-row"> <div class="col-md-4 col-sm-4 col-xs-12 col-bord col-step-1 wow fadeInUp" data-wow-duration="500ms"> <div class="col-border-steps"> <div class="step-wrapper"> <div class="pull-left triangle"> <img data-src="img/triangle.png" alt="triangle" class="lazy-4"> </div> <div class="step-content-wrapper"> <p class="p-step-1">001</p> <p class="p-step-2">Select</p> <p class="p-step-3">Select your price range and the car your wish to drive.</p> <div class="short-line"></div> </div> <div class="clearfix"></div> </div> </div> <div class="content-over"> <div class="flex-wrapper"> <div> <h4 class="cover-title text-center">Select</h4> <p class="cover-text">If you're one of Australia's 618,000 new car buyers in 2017 and would you like to test drive a selection of your short listed cars then the CarTest is for you. Signup to select, drive and receive exclusive discounted pricing once you've found the perfect match.</p> </div> </div> </div> </div> <div class="col-md-4 col-sm-4 col-xs-12 col-bord col-bord-2 col-step-2 wow fadeInUp" data-wow-duration="1000ms"> <div class="col-border-steps"> <div class="step-wrapper"> <div class="pull-left triangle"> <img data-src="img/triangle.png" alt="triangle" class="lazy-5"> </div> <div class="step-content-wrapper"> <p class="p-step-1">002</p> <p class="p-step-2">Try</p> <p class="p-step-3">Drive the car you choose from 3 to 7 days.</p> <div class="short-line"></div> </div> <div class="clearfix"></div> </div> </div> <div class="content-over"> <div class="flex-wrapper"> <div> <h4 class="cover-title text-center">Try</h4> <p class="cover-text">We will deliver your short list of vehicles one at a time to your home or office for a stress free 3-7 day test drive. To receive the rewards offered by the Cartest you’ll be asked to rate each vehicle on various features such as style, comfort, performance etc. This provides manufacturers with feedback about the vehicle so they can improve their offering.</p> </div> </div> </div> </div> <div class="col-md-4 col-sm-4 col-xs-12 col-bord col-step-3 wow fadeInUp" data-wow-duration="1500ms"> <div class="col-border-steps"> <div class="step-wrapper"> <div class="pull-left triangle"> <img data-src="img/triangle.png" alt="triangle" class="lazy-6"> </div> <div class="step-content-wrapper"> <p class="p-step-1">003</p> <p class="p-step-2">Buy</p> <p class="p-step-3">Receive preferential pricing from your local dealer.</p> <div class="short-line"></div> </div> <div class="clearfix"></div> </div> </div> <div class="content-over"> <div class="flex-wrapper"> <div> <h4 class="cover-title text-center">Ready to buy?</h4> <p class="cover-text">Once you're ready to buy we'll send you a special Cartest below retail price offer on your chosen vehicle. The offer is valid for 30 days and available only from your local dealer. We can book you in to visit the dealership and finalise the paperwork or arrange delivery of your new car direct to you. As a valued CarTest Member you will also receive additional perks* such as free roadside assist and free servicing for up to 3 years and of course the money back that you spent on the test drive. Now that's what we call a sweet deal!</p> </div> </div> </div> </div> </div> <div class="row row-stb row-partners-logo"> <div class="col-md-4 wow fadeInUp"> <div class="wrapper-stb-flex"> <div class="stb-wrapper"> <div class="stb">S·T·B</div> <div class="system">System</div> </div> </div> </div> <div class="col-md-8 wow fadeInUp"> <p class="stb-text">As the CarTest we believe buying cars should be as easy Select-Try-Buy. Our S-T-B system will dramatically improve new car buying, saving customers time and money all in a stress free process. With extended test-drives, industry expertise an exclusive below retail pricing we truly deliver a consumer-first experience.</p> </div> </div> </div> </div> <div class="container-fluid"> <div class="container own-container"> <div class="row"> <div class="col-md-8 col-xs-12 col-sm-8 col-lg-8 wow fadeInUp"> <div class="big-img-wrapper"> <p class="p-man-above text-uppercase">experience the journey <span class="grey-color"> with cartest </span></p> <div class="man lazy-7" data-src="img/man.jpg"></div> </div> </div> <div class="col-md-4 col-sm-4 col-lg-4 col-xs-12 wow fadeInUp"> <div class="wrapper-man"> <p class="p-bold text-uppercase">cartest is on its way to your heart</p> <p class="grey-text">90% of your buying decision will be emotionally driven meaning you will buy what you like and that's what the CarTest is all about, finding the best fit for you!</p> <div class="small-img-man hidden-xs"></div> </div> </div> </div> </div> </div> <div class="grey-divider"></div> <div class="container-fluid fluid-partners"> <div class="container"> <p class="text-uppercase text-center p-bold wow fadeInDown" id="brands">Partners and friends</p> <h3 class="text-uppercase text-center title-b wow fadeIn">Brands</h3> <h4 class="text-center wow fadeInUp">These are some of the brands Cartest will be offering</h4> <div class="row row-partners-logo hidden-xs"> <div class="col-md-4 col-sm-6 col-border wow fadeInUp"> <p class="logo-title">MG</p> <img data-src="img/mg.png" alt="mg" class="lazy-8"> </div> <div class="col-md-4 col-sm-6 col-border wow fadeInUp"> <p class="logo-title">Mercedes-Benz</p> <img data-src="img/mercedes.png" alt="mercedes-benz" class="lazy-9"> </div> <div class="col-md-4 col-sm-6 col-border wow fadeInUp"> <p class="logo-title">Jaguar</p> <img data-src="img/jaguar.png" alt="jaguar" class="lazy-10"> </div> <div class="col-md-4 col-sm-6 col-border wow fadeInUp"> <p class="logo-title">Volvo</p> <img data-src="img/volvo.png" alt="volvo" class="lazy-11"> </div> <div class="col-md-4 col-sm-6 col-border wow fadeInUp"> <p class="logo-title">Aston Martin</p> <img data-src="img/aston_martin.png" alt="aston martin" class="lazy-12"> </div> <div class="col-md-4 col-sm-6 col-border wow fadeInUp"> <p class="logo-title">BMW</p> <img data-src="img/BMW.png" alt="bmw" class="lazy-13"> </div> <div class="col-md-4 col-sm-6 col-border wow fadeInUp"> <p class="logo-title">Porsche</p> <img data-src="img/porsche.png" alt="porsche" class="lazy-14"> </div> <div class="col-md-4 col-sm-6 col-border wow fadeInUp"> <p class="logo-title">Land Rover</p> <img data-src="img/landrover.png" alt="land rover" class="lazy-15"> </div> <div class="col-md-4 col-sm-12 col-border wow fadeInUp"> <p class="logo-title">Audi</p> <img data-src="img/audi.png" alt="audi" class="lazy-16"> </div> </div> <div class="row row-partners-logo hidden-sm hidden-md hidden-lg wow fadeInUp"> <!-- brands carousel --> <div class="slick-carousel"> <div class="item"> <div class="slick-wrapper"> <p class="logo-title">MG</p> <img data-src="img/mg.png" alt="mg" class="lazy-17"> </div> </div> <div class="item"> <div class="slick-wrapper"> <p class="logo-title">Mercedes-Benz</p> <img data-src="img/mercedes.png" alt="mercedes-benz" class="lazy-18"> </div> </div> <div class="item"> <div class="slick-wrapper"> <p class="logo-title">Jaguar</p> <img data-src="img/jaguar.png" alt="jaguar" class="lazy-19"> </div> </div> <div class="item"> <div class="slick-wrapper"> <p class="logo-title">Volvo</p> <img data-src="img/volvo.png" alt="volvo" class="lazy-20"> </div> </div> <div class="item"> <div class="slick-wrapper"> <p class="logo-title">Aston Martin</p> <img data-src="img/aston_martin.png" class="astonM lazy-21" alt="aston martin"> </div> </div> <div class="item"> <div class="slick-wrapper"> <p class="logo-title">BMW</p> <img data-src="img/BMW.png" alt="bmw" class="lazy-23"> </div> </div> <div class="item"> <div class="slick-wrapper"> <p class="logo-title">Porsche</p> <img data-src="img/porsche.png" alt="porsche"class="lazy-24"> </div> </div> <div class="item"> <div class="slick-wrapper"> <p class="logo-title">Land Rover</p> <img data-src="img/landrover.png" alt="land rover" class="lazy-25"> </div> </div> <div class="item"> <div class="slick-wrapper"> <p class="logo-title">Audi</p> <img data-src="img/audi.png" alt="audi" class="lazy-26"> </div> </div> </div> </div> <!-- brands carousel --> </div> </div> <div class="container-fluid newsletter-fluid" id="press"> <div class="container wow fadeInUp"> <div class="img-wr"> <div class="white-bg hidden-xs"> <p class="p-bold text-uppercase">cartest articles</p> <h3 class="text-uppercase title-b">press</h3> <div class="dark-divider"></div> <div class="column-text cl-effect-5"> <p class="p-bold text-uppercase pull-left">the motor report</p> <a href="http://www.themotorreport.com.au/63456/thecartest-global-first-extended-test-drive-opportunity-for-australian-car-buyers" target="_blank" class="read text-uppercase pull-right"><span data-hover="read">read</span></a> <p class="clearfix"></p> </div> <div class="grey-divider divider"></div> <div class="column-text cl-effect-5"> <p class="p-bold text-uppercase pull-left">Startup Daily</p> <a href="http://www.startupdaily.net/2017/02/thecartest-platform-car-buyers-extended-test-driving-period/" target="_blank" class="read text-uppercase pull-right"><span data-hover="read">read</span></a> <p class="clearfix"></p> </div> <div class="grey-divider divider"></div> <div class="column-text cl-effect-5"> <p class="p-bold text-uppercase pull-left">behind the wheel</p> <a href="#" class="btnShow read text-uppercase pull-right"><span data-hover="read">read</span></a> <p class="clearfix"></p> </div> <div class="grey-divider divider"></div> </div> <img data-src="img/volvo-bg.jpg" alt="volvo" class="img-responsive img-bg lazy-27"> </div> </div> <div class="container container-newsletter"> <div class="white-bg white-second visible-xs wow fadeIn"> <p class="p-bold text-uppercase">cartest articles</p> <h3 class="text-uppercase">press</h3> <div class="dark-divider"></div> <div class="column-text cl-effect-5"> <p class="p-bold text-uppercase pull-left">the motor report</p> <a href="http://www.themotorreport.com.au/63456/thecartest-global-first-extended-test-drive-opportunity-for-australian-car-buyers" target="_blank" class="read text-uppercase pull-right"><span data-hover="read">read</span></a> <p class="clearfix"></p> </div> <div class="grey-divider divider"></div> <div class="column-text cl-effect-5"> <p class="p-bold text-uppercase pull-left">Startup Daily</p> <a href="http://www.startupdaily.net/2017/02/thecartest-platform-car-buyers-extended-test-driving-period/" target="_blank" class="read text-uppercase pull-right"><span data-hover="read">read</span></a> <p class="clearfix"></p> </div> <div class="grey-divider divider"></div> <div class="column-text cl-effect-5"> <p class="p-bold text-uppercase pull-left">behind the wheel</p> <a href="#" class="btnShow read text-uppercase pull-right"><span data-hover="read">read</span></a> <p class="clearfix"></p> </div> <div class="grey-divider divider"></div> </div> <div class="container-fluid fluid-dark-newsletter"> <div class="container container-newsletter"> <!-- search point --> <div class="flex-search-wrapper"> <div class="envelop-wrapper"> <img data-src="img/mail.png" alt="envelop" class="lazy-28"> <p class="newsletter text-uppercase">Newsletter</p> </div> <input type="text" placeholder="Enter your email address..." class="newsletter-input"> <img data-src="img/arrow.png" alt="send" class="arrow-send submit lazy-29"> </div> <!-- search point --> </div> </div> </div> </div> <footer class="container-fluid wow wow fadeInUp"> <div class="container"> <div class="row row-footer"> <div class="col-md-4"> <p class="footer-laws text-center text-uppercase"> 2017 CarTest ©</p> </div> <div class="col-md-4"> <a href="mailto:hello@thecartest.com.au" class="footer-link text-center">hello@thecartest.com.au</p> </div> <div class="col-md-4 footer-ul"> <ul class="list-inline pull-right cl-effect-5"> <li><a href="https://www.facebook.com/TheCarTest/"><span data-hover="facebook">facebook</span></a></li> <li><a href="https://twitter.com/thecartest"><span data-hover="twitter">twitter</span></a></li> <li><a href="https://www.youtube.com/channel/UC1wEtKHomqJF5R7BK4KvI9A/featured"><span data-hover="youtube">youtube</span></a></li> <li><a href="https://angel.co/cartest"><span data-hover="angel">angel</span></a></li> <li><a href="https://www.linkedin.com/pulse/your-independent-new-car-buying-centre-christian-schaefer"><span data-hover="LinkedIn">LinkedIn</span></a></li> </ul> <span class="clearfix"></span> </div> </div> </div> </footer> <!-- pop up for pdf --> <div class="pdfFixed"> <div class="pdfFlex"> <div class="pdfFrame-wrapper"> <div class="pdfAbsCross">x</div> <iframe id="framePDF"></iframe> </div> </div> </div> <!-- pop up for pdf --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> <script src="js/jquery.lazy.min.js"></script> <script src="js/jquery.lazy.iframe.min.js"></script> <script src="js/jquery.lazy.script.min.js"></script> <script src="js/common.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.7.1/slick.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script> <script> new WOW().init(); </script> </body> </html>Save