Edit file File name : product.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"> <div class="hero__badge">DEPARTING QUEENSTOWN</div> <h1>Milford Scenic Overflight</h1> </div> <div class="hero__button-icon"> <img width="39" height="18" src="./assets/img/hero-bg/plane.svg" alt="icon" /> </div> </div> </section> <section class="cta-three-columns"> <div class="cta-three-columns__content"> <div class="cta-three-columns__text"> <h4> Experience magnificent Milford Sound / Piopiotahi by air </h4> <ul> <li> <span>Children must accompany a paying adult.</span> </li> <li> <span>Infants (Under 4 years and under 15kgs) are required to sit on an adults knee. <br /> Infants over 15kgs will require their own seat.</span> </li> <li> <span>Minimum numbers apply for flights. Bookings will be coordinated to achieve this <br /> where possible.</span> </li> </ul> <p> Soaring above Milford Sound / Piopiotahi, you’ll get an aerial perspective of cascading waterfalls hidden amongst towering peaks, and embrace the magnificence of Mitre Peak as you fly by it. From the luxuriant mosses and ferns clinging to sheer rock faces to immense peaks rising straight from the ocean depths, the entire experience is truly awe-inspiring. </p> </div> <div class="cta-three-columns__info"> <div class="cta-three-columns__price"> <b>$645pp</b> </div> <ul> <li> <b>Duration</b> <span>1 hour 20 mins</span> </li> <li> <b>Departs</b> <span>2:30pm</span> </li> </ul> </div> <div class="cta-three-columns__aside aside"> <div class="aside__img"> <ul> <li> <svg width="22" height="21"> <use href="assets/sprite.svg#star"></use> </svg> </li> <li> <svg width="22" height="21"> <use href="assets/sprite.svg#star"></use> </svg> </li> <li> <svg width="22" height="21"> <use href="assets/sprite.svg#star"></use> </svg> </li> <li> <svg width="22" height="21"> <use href="assets/sprite.svg#star"></use> </svg> </li> <li> <svg width="22" height="21"> <use href="assets/sprite.svg#star"></use> </svg> </li> </ul> </div> <div class="aside__text"> <h5>Epic experience</h5> <p> “Excellent crew in both the flight and the cruise. Highly recommended for anyone. It’s absolutely beautiful and stunning views.” </p> <span>Nihani - Brisbane</span> </div> <a class="aside__btn btn" href="#modal-book"> <span>Before you book</span> <figure> <img width="7" height="19" src="/assets/img/icons/letter.svg" alt="image" /> </figure> </a> </div> </div> </section> <section class="column-and-sticky-item"> <div class="column-and-sticky-item__wrapper"> <div class="column-and-sticky-item__content"> <div class="column-and-sticky-item__video video-item"> <div class="video-item__play" data-video-src="https://player.vimeo.com/video/119853425?color=00adef&title=0&byline=0&portrait=0"> <svg width="25" heigth="21"> <use href="/assets/sprite.svg#play"></use> </svg> </div> <figure class="video-item__poster"> <img class="lazy" data-src="./assets/img/banner/video-img.jpg" alt="image" /> </figure> </div> <div class="column-and-sticky-item__slider"> <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/img1.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/img1.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/img1.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/img1.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/img1.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/img1.jpg" alt="image" /> </div> </div> </div> <div class="slider-image__dots"></div> </div> </div> <p> You will fly over some incredible landscapes on your journey to Milford Sound / Piopiotahi. Depending on the flight route for the day, your sights may include; Skippers Canyon, Glenorchy, Mount Earnslaw, Mount Tutoko, Milford Sound / Piopiotahi, Mitre Peak, Arthur Valley, the Milford Track, Lake Te Anau, Eglinton Valley, Greenstone Valley and Lake Whakatipu. </p> </div> <div class="column-and-sticky-item__card-wrapper"></div> <div class="column-and-sticky-item__tabs tabs"> <div class="tabs__container container"> <div class="tabs__title"> <ul> <li data-tab-target="#flightMap" class="tab active"> Flight map </li> <li data-tab-target="#cruiseMap" class="tab"> Cruise Map </li> <li data-tab-target="#coachMap" class="tab"> Coach Map </li> </ul> </div> <div class="tabs__item active" id="flightMap" data-tab-content> <div class="tabs__inner"> <div class="inner-item"> <div class="inner-item__wrapper"> <div class="inner-item__img"> <img src="./assets/img/tabs/img1.jpg" alt="image" /> </div> <div class="inner-item__content"> <div class="inner-item__content-title"> <span> <svg width="39.15" height="39.15"> <use href="./assets/sprite.svg#tabs-icon"></use> </svg> </span> <h3> Milford Scenic Overflight Path </h3> </div> <a href="#" class="btn">View detailed flight map</a> </div> </div> </div> </div> </div> <div class="tabs__item" id="cruiseMap" data-tab-content> <div class="tabs__inner"> <div class="inner-item"> <div class="inner-item__wrapper"> <div class="inner-item__img"> <img src="./assets/img/tabs/img1.jpg" alt="image" /> </div> <div class="inner-item__content"> <div class="inner-item__content-title"> <span> <svg width="39.15" height="39.15"> <use href="./assets/sprite.svg#tabs-icon"></use> </svg> </span> <h3> Milford Scenic Overflight Path2 </h3> </div> <a href="#" class="btn">View detailed flight map</a> </div> </div> </div> </div> </div> <div class="tabs__item" id="coachMap" data-tab-content> <div class="tabs__inner"> <div class="inner-item"> <div class="inner-item__wrapper"> <div class="inner-item__img"> <img src="./assets/img/tabs/img1.jpg" alt="image" /> </div> <div class="inner-item__content"> <div class="inner-item__content-title"> <span> <svg width="39.15" height="39.15"> <use href="./assets/sprite.svg#tabs-icon"></use> </svg> </span> <h3> Milford Scenic Overflight Path3 </h3> </div> <a href="#" class="btn">View detailed flight map</a> </div> </div> </div> </div> </div> </div> <div id="lightbox" class="lightbox"> <div class="lightbox__overlay"></div> <div class="lightbox__content"> <button class="lightbox__close" aria-label="Close Lightbox"> × </button> <img id="lightbox-image" src="" alt="Detailed image" /> </div> </div> </div> <div class="column-and-sticky-item__cards cards-items"> <div class="cards-items__wrapper cta-item"> <figure class="cta-item__image"> <img class="lazy" data-src="/assets/img/content-images/mountains.jpg" alt="image" /> </figure> <div class="cta-item__content"> <figure class="cta-item__icon"> <img width="44" height="44" src="/assets/img/four-columns/04.svg" alt="" /> </figure> <h3>Every Seat Is A Window Seat</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> <div class="cards-items__wrapper cta-item"> <figure class="cta-item__image"> <img class="lazy" data-src="/assets/img/content-images/plane-in-the-sky.jpg" alt="image" /> </figure> <div class="cta-item__content"> <figure class="cta-item__icon"> <img width="44" height="44" src="/assets/img/four-columns/02.svg" alt="" /> </figure> <h3> The Fastest Way To Milford / Piopiotahi </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> </div> </div> <article class="column-and-sticky-item__card card-sticky"> <div class="card-sticky__title"> <h3>Book your flight</h3> </div> <p>Pricing will be displayed here</p> <figure class="card-sticky__image"></figure> <div class="card-sticky__btn-wrapper"> <a class="card-sticky__btn btn" href="#">BOOK NOW</a> </div> </article> </div> </section> <section class="two-columns two-columns--without-line"> <div class="two-columns__content"> <div class="two-columns__title"> <h2>More Unforgettable Experiences</h2> </div> <div class="two-columns__cards"> <a href="#" class="two-columns__card"> <div class="two-columns__image-wrapper"> <figure class="two-columns__image"> <img width="840" height="600" src="./assets/img/cards/01.jpg" alt="image" /> </figure> <ul> <li> <img width="35" height="15" src="./assets/img/banner/icon-3.svg" alt="image" /> </li> </ul> </div> <div class="two-columns__card-body"> <div class="two-columns__card-left"> <h3>MILFORD OVERFLIGHT</h3> <p> Sed posuere consectetur est at lobortis. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Lorem ipsum dolor sit. </p> <span class="two-columns__card-btn btn btn--outline" href="#">READ MORE</span> </div> </div> </a> <a href="#" class="two-columns__card"> <div class="two-columns__image-wrapper"> <figure class="two-columns__image"> <img width="840" height="600" src="./assets/img/cards/02.jpg" alt="image" /> </figure> <ul> <li> <img width="35" height="15" src="./assets/img/banner/icon-1.svg" alt="image" /> </li> <li> <img width="35" height="15" src="./assets/img/banner/icon-2.svg" alt="image" /> </li> <li> <img width="35" height="15" src="./assets/img/banner/icon-3.svg" alt="image" /> </li> </ul> </div> <div class="two-columns__card-body"> <div class="two-columns__card-left"> <h3>COACH CRUISE FLY</h3> <p> Sed posuere consectetur est at lobortis. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Lorem ipsum dolor sit. </p> <span class="two-columns__card-btn btn btn--outline" href="#">READ MORE</span> </div> </div> </a> </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="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="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-book" class="modal-window__item modal-book"> <button aria-label="close modal window" class="modal-book__close-icon modal-window__close-icon"> CLOSE </button> <div class="modal-book__inner"> <div class="modal-book__text"> <h3>Before you book</h3> <ul> <li>Children must accompany a paying adult.</li> <li> Infants (Under 4 years and under 15kgs) are required to sit on an adults knee. Infants over 15kgs will require their own seat. </li> <li> Minimum numbers apply for flights. Bookings will be coordinated to achieve this where possible. </li> <li> For bookings on the day, <a href="#">please call the office</a> to confirm availability. </li> <li>Prices valid until 30th September 2024.</li> </ul> </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>Save