View file File name : our-story.html Content :<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, minimum-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>document</title> <link rel="stylesheet" href="https://use.typekit.net/oqa3unn.css"> <link rel="stylesheet" href="./dist/style.css" /> <link rel="preload" href="./assets/sprite.svg" as="image" /> <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" /> </head> <body class="preload"> <header class="header"> <a href="#" class="header__logo header__logo--section"> <img width="187" height="67" src="./assets/img/logo.svg" alt="logo" /> </a> <a href="#" class="header__logo header__logo--menu"> <img width="187" height="67" src="./assets/img/logo.svg" alt="logo" /> </a> <div class="header__wrapper"> <a href="#" class="btn">FLIGHT EXPERIENCES</a> <ul> <li><a href="#">CONTACT</a></li> <!-- <li><a href="#">中文</a></li> --> <li> <a href="#"><img src="./assets/img/utils/header-trigger.png" alt="icon" /></a> </li> </ul> <div class="header__trigger js-menu-toggle"> <div class="header__trigger-text">MENU</div> <div class="header__icon"> <span></span> <span></span> <span></span> </div> </div> </div> </header> <div class="nav__fader js-menu-toggle"></div> <nav class="nav"> <div class="nav__left"> <div class="nav__side-text">FEATURED ADVENTURE</div> <a href="#" class="nav__card"> <div class="nav__img"> <img width="403" height="269" src="./assets/img/nav/image.jpg" alt="image" /> </div> <div class="nav__text"> <div class="nav__wrapper"> <h6>MILFORD SCENIC OVERFLIGHT</h6> <ul> <li>DEPARTING QUEENSTOWN</li> </ul> </div> <div class="nav__icon"> <svg xmlns="http://www.w3.org/2000/svg" width="10.449" height="19.395" viewBox="0 0 10.449 19.395"> <path id="Контур_865" data-name="Контур 865" d="M-20521.217-17873.584l8.635,8.635-8.635,8.635" transform="translate(20522.279 17874.646)" fill="none" stroke="#f2f1ed" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/> </svg> </div> </div> </a> </div> <div class="nav__inner"> <ul> <li class="submenu"> <div class="submenu__title"> <a href="#">FLIGHT EXPERIENCES</a> <div class="submenu__icon"> <svg> <use href="./assets/sprite.svg#arrow-down"></use> </svg> </div> </div> <div class="submenu__body"> <ul> <li><a href="#">Fly Cruise Fly</a></li> <li><a href="#">Coach Cruise Fly</a></li> <li> <a href="#">Milford Sound Overflight</a> </li> <li><a href="#">Fly Heli-Hike</a></li> <li><a href="#">Milford Sound Flybacks</a></li> <li><a href="#">Fly Cruise Heli</a></li> <li><a href="#">Charter / C&I</a></li> </ul> </div> </li> <li class="submenu"> <div class="submenu__title"> <a href="#">INFORMATION</a> <div class="submenu__icon"> <svg> <use href="./assets/sprite.svg#arrow-down"></use> </svg> </div> </div> <div class="submenu__body"> <ul> <li><a href="#">Our Story</a></li> <li><a href="#">Careers</a></li> <li><a href="#">Community</a></li> <li><a href="#">Journal</a></li> <li><a href="#">Trade & Media</a></li> <li><a href="#">Totally Tourism</a></li> <li><a href="#">Contact Us</a></li> </ul> </div> </li> <li class="link-mobile"><a href="#">CONTACT</a></li> <li class="link-mobile"><a href="#">中文</a></li> </ul> <a href="#" class="nav__btn">FLIGHT EXPERIENCES <svg width="76" height="26" viewBox="0 0 76 26"> <use href="assets/sprite.svg#helicopter"></use> </svg> </a> </div> </nav> <main> <section class="hero hero--small"> <div class="hero__bg"> <img src="assets/img/hero-bg/hero-1.jpg" alt="img" /> </div> <div class="hero__inner"> <div class="hero__text-wrapper"> <h1>Our Story</h1> </div> </div> </section> <section class="text-img-columns"> <div class="text-img-columns__content"> <div class="text-img-columns__text"> <p> Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla. Etiam porta sem malesuada magna euismod. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. </p> <p> Donec id elit non mi porta gravida at eget metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Maecenas sed diam eget risus varius blandit sit amet non magna. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. </p> </div> <figure class="text-img-columns__image"> <img width="554" height="334" src="/assets/img/content-images/plane-driver.jpg" alt="image" /> </figure> </div> </section> <section class="four-columns"> <div class="four-columns__content"> <div class="four-columns__items"> <div class="four-columns__item"> <figure class="four-columns__item-image"> <img width="60" height="60" src="./assets/img/four-columns/01.svg" alt="icon" /> </figure> <p> Cras justo odio, dapibus ac facilisis in, egestas eget quam. </p> </div> <div class="four-columns__item"> <figure class="four-columns__item-image"> <img width="60" height="24" src="./assets/img/four-columns/02.svg" alt="icon" /> </figure> <p> Cras justo odio, dapibus ac facilisis in, egestas eget quam. </p> </div> <div class="four-columns__item"> <figure class="four-columns__item-image"> <img width="50" height="50" src="./assets/img/four-columns/03.svg" alt="icon" /> </figure> <p> Cras justo odio, dapibus ac facilisis in, egestas eget quam. </p> </div> <div class="four-columns__item"> <figure class="four-columns__item-image"> <img width="65" height="42" src="./assets/img/four-columns/04.svg" alt="icon" /> </figure> <p> Cras justo odio, dapibus ac facilisis in, egestas eget quam. </p> </div> </div> </div> </section> <section class="text-and-image"> <div class="text-and-image__content"> <div class="text-and-image__text"> <p> Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla. Etiam porta sem malesuada magna euismod. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. </p> <p> Donec id elit non mi porta gravida at eget metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Maecenas sed diam eget risus varius blandit sit amet non magna. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. </p> </div> <figure class="text-and-image__image"> <img class="lazy" width="986" height="757" data-src="/assets/img/content-images/people-and-plane.jpg" alt="image" /> </figure> </div> </section> <section class="banner-with-text"> <figure class="banner-with-text__image"> <img width="1920" height="750" class="lazy" data-src="/assets/img/banner/banner-plane.jpg" alt="image" /> </figure> <div class="banner-with-text__content"> <div class="banner-with-text__text"> <h2>Our planes</h2> <p> With over 40 years of flying customers to experience the magic of Milford Sound, our experienced and dedicated team will provide you with a truly memorable experience. </p> <p> 3 x GA8 Airvans – 7 passenger seats, single engine <br />3 x Cessna Grand Caravan – 13 passenger seats, single turbine engine </p> </div> </div> </section> <section class="img-text-slider"> <div class="img-text-slider__inner"> <div class="img-text-slider__item"> <div class="img-text-slider__text"> <h3>Plane 1</h3> <p> Maecenas faucibus mollis interdum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras mattis consectetur purus sit amet fermentum. Etiam porta sem malesuada magna mollis euismod. </p> </div> <div class="slider-image"> <div class="slider-image__outer"> <div class="slider-image__foot"> <div class="slider-image__arrow slider-image__arrow--prev"> <div class="slider-image__icon"> <img src="./assets/img/grid-sliders/arrow.svg" alt="" /> </div> </div> <div class="slider-image__arrow slider-image__arrow--next"> <div class="slider-image__icon"> <img src="./assets/img/grid-sliders/arrow.svg" alt="" /> </div> </div> </div> <div class="slider-image__inner"> <div class="slider-image__item"> <div class="slider-image__img"> <img class="lazy" width="1132" height="757" data-src="./assets/img/grid-sliders/img-small1.jpg" alt="image" /> </div> </div> <div class="slider-image__item"> <div class="slider-image__img"> <img width="1132" height="757" src="./assets/img/grid-sliders/img-small1.jpg" alt="image" /> </div> </div> <div class="slider-image__item"> <div class="slider-image__img"> <img width="1132" height="757" src="./assets/img/grid-sliders/img-small1.jpg" alt="image" /> </div> </div> <div class="slider-image__item"> <div class="slider-image__img"> <img width="1132" height="757" src="./assets/img/grid-sliders/img-small1.jpg" alt="image" /> </div> </div> <div class="slider-image__item"> <div class="slider-image__img"> <img width="1132" height="757" src="./assets/img/grid-sliders/img-small1.jpg" alt="image" /> </div> </div> <div class="slider-image__item"> <div class="slider-image__img"> <img width="1132" height="757" src="./assets/img/grid-sliders/img-small1.jpg" alt="image" /> </div> </div> </div> <div class="slider-image__dots"></div> </div> </div> </div> <div class="img-text-slider__item"> <div class="img-text-slider__text"> <h3>Plane 2</h3> <p> Maecenas faucibus mollis interdum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras mattis consectetur purus sit amet fermentum. Etiam porta sem malesuada magna mollis euismod. </p> </div> <div class="slider-image"> <div class="slider-image__outer"> <div class="slider-image__foot"> <div class="slider-image__arrow slider-image__arrow--prev"> <div class="slider-image__icon"> <img src="./assets/img/grid-sliders/arrow.svg" alt="" /> </div> </div> <div class="slider-image__arrow slider-image__arrow--next"> <div class="slider-image__icon"> <img src="./assets/img/grid-sliders/arrow.svg" alt="" /> </div> </div> </div> <div class="slider-image__inner"> <div class="slider-image__item"> <div class="slider-image__img"> <img class="lazy" width="1132" height="757" data-src="./assets/img/grid-sliders/img-small1.jpg" alt="image" /> </div> </div> <div class="slider-image__item"> <div class="slider-image__img"> <img width="1132" height="757" src="./assets/img/grid-sliders/img-small1.jpg" alt="image" /> </div> </div> <div class="slider-image__item"> <div class="slider-image__img"> <img width="1132" height="757" src="./assets/img/grid-sliders/img-small1.jpg" alt="image" /> </div> </div> <div class="slider-image__item"> <div class="slider-image__img"> <img width="1132" height="757" src="./assets/img/grid-sliders/img-small1.jpg" alt="image" /> </div> </div> <div class="slider-image__item"> <div class="slider-image__img"> <img width="1132" height="757" src="./assets/img/grid-sliders/img-small1.jpg" alt="image" /> </div> </div> <div class="slider-image__item"> <div class="slider-image__img"> <img width="1132" height="757" src="./assets/img/grid-sliders/img-small1.jpg" alt="image" /> </div> </div> </div> <div class="slider-image__dots"></div> </div> </div> </div> </div> </section> <section class="grid-items"> <div class="grid-items__content"> <div class="grid-items__title"> <h2>MILFORD SOUND SCENIC FLIGHTS TEAM</h2> <p> Everyday our team has the privilege of sharing world class adventures in the wilderness that is our stunning backyard. </p> </div> <div class="grid-items__items"> <div class="grid-items__link card-link"> <figure class="card-link__image"> <img class="lazy" width="402" height="402" data-src="/assets/img/cta/image-1.jpg" alt="image" /> </figure> <h3>NORMAN MCTABBY II</h3> <p>PASSENGER MEET AND GREET</p> </div> <div class="grid-items__link card-link"> <figure class="card-link__image"> <img src="./assets/img/grid-sliders/img-small1.jpg" alt="image"> </figure> <h3>JAKE BROADHURST</h3> <p>OPERATIONS MANAGER / LINE PILOT</p> </div> <div class="grid-items__link card-link"> <figure class="card-link__image"></figure> <h3>NAME SURNAME</h3> <p>JOB TITLE</p> </div> <div class="grid-items__link card-link"> <figure class="card-link__image"></figure> <h3>NAME SURNAME</h3> <p>JOB TITLE</p> </div> <div class="grid-items__link card-link"> <figure class="card-link__image"></figure> <h3>NAME SURNAME</h3> <p>NAME SURNAME</p> </div> <div class="grid-items__link card-link"> <figure class="card-link__image"></figure> <h3>NAME SURNAME</h3> <p>JOB TITLE</p> </div> <div class="grid-items__link card-link"> <figure class="card-link__image"></figure> <h3>NAME SURNAME</h3> <p>JOB TITLE</p> </div> <div class="grid-items__link card-link"> <figure class="card-link__image"></figure> <h3>NAME SURNAME</h3> <p>NAME SURNAME</p> </div> </div> </div> </section> <section class="banner-with-text banner-with-text--right-text"> <figure class="banner-with-text__image"> <img width="1920" height="750" class="lazy" data-src="/assets/img/banner/banner-with-woman.jpg" alt="image" /> </figure> <div class="banner-with-text__content"> <div class="banner-with-text__text"> <h2>Safety</h2> <p> Milford Sound Scenic Flights has been operating for over 40 years and are a Civil Aviation Authority (CAA) approved operator. We run under strict ruling where our modern fleet are subjected to regular maintenance checks as safety is paramount. Our pilots undertake extensive training in mountain flying and all pilots have well above the required flying experience – some even having close to 8000 hours. </p> </div> </div> </section> <section class="reviews-slider"> <div class="reviews-slider__content"> <figure class="reviews-slider__image"> <img width="1780" height="744" src="/assets/img/slider/plane-bg.svg" alt="image" /> </figure> <div class="reviews-slider__slider"> <article class="reviews-slider__slide"> <blockquote> <q>“The plane can go where you can’t go by foot. it will leave long-lasting memories you will never forget.”</q> <span>Jan R - New Zealand</span> </blockquote> </article> <article class="reviews-slider__slide"> <blockquote> <q>“The plane can go where you can’t go by foot. it will leave long-lasting memories you will never forget.”</q> <span>Jan R - New Zealand</span> </blockquote> </article> <article class="reviews-slider__slide"> <blockquote> <q>“The plane can go where you can’t go by foot. it will leave long-lasting memories you will never forget.”</q> <span>Jan R - New Zealand</span> </blockquote> </article> </div> <div class="reviews-slider__btn-wrapper"> <a class="reviews-slider__btn btn" href="#"> <span>FIND YOUR PERFECT ADVENTURE</span> <img width="70" height="30" src="/assets/img/hero-bg/plane.svg" alt="icon" /> </a> </div> </div> </section> <section class="contact-us-form"> <div class="contact-us-form__block"> <div class="contact-us-form__info"> <div class="contact-us-form__text"> <h3>Tiaki Promise</h3> <div class="contact-us-form__img"> <div class="contact-img"> <img class="lazy" data-src="assets/img/form/icon.svg" alt="icon" /> </div> <div class="contact-title"> <p> Tiaki means to care for people, place and culture </p> <p> The Tiaki Promise is embraced by our teams and we encourage all of our guests, be them visitors or citizens of New Zealand, to learn and practice the Tiaki promise. </p> </div> </div> <p> New Zealand is precious, and everyone who lives and travels here has a responsibility to look after it. The Tiaki Promise is a commitment to care for New Zealand, for now and for future generations. </p> <p> By following the Tiaki Promise, you are making a commitment to New Zealand. To act as a guardian, protecting and preserving our home. </p> <p> Nau mai, haere mai ki Aotearoa. Welcome to New Zealand. </p> <a href="">Read more</a> </div> </div> <div class="contact-us-form__form"> <h3>Contact us</h3> <div class="contact-us-form__form-info-columns"> <div class="contact-us-form__form-info-column"> <ul> <li> <span>Milford Sound Scenic Flights</span> </li> <li> <span>Free Phone</span> <a class="contact-us-form__form-info-link" href="tel:0800207206">0800 207 206</a> </li> <li> <span>Phone</span> <a class="contact-us-form__form-info-link" href="tel:+6434423065">+64 3 442 3065</a> </li> <li> <span>Email</span> <a class="contact-us-form__form-info-link" href="mailto:info@milfordflights.co.nz">info@milfordflights.co.nz</a> </li> </ul> </div> <div class="contact-us-form__form-info-column"> <h4>Already booked?</h4> <p> Weather check is 1hour 30mins prior to departure time for all trips – excluding coach options. </p> <p>Please contact our Freephone weather line</p> <a href="tel:0800463635">0800 463 635.</a> </div> </div> <form action="#"> <label class="field"> <input type="text" placeholder="Your name *" /> </label> <label class="field"> <input type="text" placeholder="Your email *" /> </label> <label class="field"> <textarea class="textarea-contact" placeholder="Your message *"></textarea> </label> <button class="contact-us-form__btn btn" type="submit"> SEND </button> </form> </div> </div> </section> <section class="grid-link-icon"> <div class="link-icon-text"> <div class="link-icon-text__title"> <h3> Real time adventures. <br /> <span>Share yours with us.</span> </h3> <p> Tag us on Instagram <a href="">#worldsbestscenicflight</a><a href=""> @milfordsoundscenicflights.</a>. </p> </div> <div class="link-icon-text__icon"> <ul> <li> <a href="#"> <img class="lazy" data-src="assets/img/grid-link-icon/Qualmark-Gold-Award-Logo-Stacked-479644-500px.svg" alt="" /> </a> </li> <li> <a href="#"> <img class="lazy" data-src="assets/img/grid-link-icon/icon.svg" alt="" /> </a> </li> <li> <a href="#"> <img class="lazy" data-src="/> </a> </li> <li> <a href=" #"> <img class="lazy" data-src="assets/img/grid-link-icon/download.svg" alt="" /> </a> </li> <li> <a href="#"> <img class="lazy" data-src="assets/img/grid-link-icon/doc-approved-logo.svg" alt="" /> </a> </li> </ul> </div> </div> <div class="grid-link-icon__inst"></div> </section> </main> <footer class="footer"> <div class="footer__top"> <div class="footer-logo-social"> <div class="footer-logo-social__block footer-item"> <div class="footer-item__logo"> <img width="187" height="67" class="lazy" data-src="./assets/img/logo.svg" alt="logo" /> </div> <ul class="footer-item__social"> <li> <a href=""> <svg width="37" height="37"> <use href="assets/sprite.svg#social-facebook"></use> </svg> </a> </li> <li> <a href=""><svg width="37" height="37"> <use href="assets/sprite.svg#social-instagram"></use> </svg> </a> </li> <li> <a href=""><svg width="37" height="37"> <use href="assets/sprite.svg#social-youtube"></use> </svg> </a> </li> <li> <a href=""><svg width="37" height="37"> <use href="assets/sprite.svg#social-tripadvisor"></use> </svg> </a> </li> </ul> <div class="footer-item__img"> <img class="lazy" data-src="assets/img/footer/TT-Logo.png" alt="" /> </div> </div> </div> <div class="footer__link"> <div class="footer__list"> <span>Flight experiences</span> <ul> <li><a href="">Fly Cruise Fly</a></li> <li><a href="">Coach Cruise Fly</a></li> <li><a href="">Milford Sound Overflight</a></li> <li><a href="">Fly Heli-Hike</a></li> <li><a href="">Milford Sound Flybacks</a></li> <li><a href="">Fly Cruise Heli</a></li> <li><a href="">Charter / C&I</a></li> </ul> </div> <div class="footer__list"> <span>Information</span> <ul> <li><a href="">Our Story</a></li> <li><a href="">Careers</a></li> <li><a href="">Community</a></li> <li><a href="">Journal</a></li> <li><a href="">Trade & Media</a></li> <li><a href="">Totally Tourism</a></li> <li><a href="">Contact Us</a></li> </ul> </div> </div> </div> <div class="footer__bottom"> <p> ©2024 Milford Sound Scenic Flights. Operated by Totally Tourism Ltd. / Created by <a href="">Fluid</a> </p> <ul> <li><a href="">Terms & Conditions</a></li> <li><a href="">Privacy Policy</a></li> <li><a href="">Cookie Policy</a></li> <li><a href=""> Frequently Asked Questions</a></li> </ul> </div> </footer> <div id="modal-window" class="modal-window"> <div id="modal-info" class="modal-window__item modal-info"> <button aria-label="close modal window" class="modal-window__close-icon"> CLOSE <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35 35"> <circle cx="17.5" cy="17.5" r="17.5" fill="#ededed" data-name="Ellipse 76" /> <path fill="none" stroke="#555" stroke-width="3" d="M11.805 12.429l11.384 11.384" data-name="Path 162" /> <path fill="none" stroke="#555" stroke-width="3" d="M23.193 12.43L11.809 23.814" data-name="Path 163" /> </svg> </button> <div class="modal-info__inner"> <div class="modal-info__logo"> <img src="./assets/img/modal-logo.svg" alt="logo" /> </div> <div class="modal-info__text"> <p> The Helicopter Line and Mitre Peak Cruises collaborate on Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Maecenas faucibus mollis interdum. </p> </div> </div> </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"> <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M18.9422 1.0572C19.4629 1.5779 19.4629 2.42212 18.9422 2.94281L2.94216 18.9428C2.42146 19.4635 1.57724 19.4635 1.05654 18.9428C0.535841 18.4221 0.535841 17.5779 1.05654 17.0572L17.0565 1.0572C17.5772 0.536497 18.4215 0.536497 18.9422 1.0572Z" fill="white" /> <path fill-rule="evenodd" clip-rule="evenodd" d="M1.05654 1.0572C1.57724 0.536497 2.42146 0.536497 2.94216 1.0572L18.9422 17.0572C19.4629 17.5779 19.4629 18.4221 18.9422 18.9428C18.4215 19.4635 17.5772 19.4635 17.0565 18.9428L1.05654 2.94281C0.535841 2.42212 0.535841 1.5779 1.05654 1.0572Z" fill="white" /> </svg> </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 class="modal-window__fader"></div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.lazy/1.7.11/jquery.lazy.min.js"></script> <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script> <script src="./dist/main.js"></script> </body> </html>