Edit file File name : community.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>Your community</title> <link rel="stylesheet" href="./style.css"> </head> <body> <header class="header" id="header"> <div class="header__container container"> <a href="#" class="header__img"> <img src="./assets/img/icons/logo-white.svg" alt="image"> </a> <nav class="nav nav--header" id="nav"> <ul class="nav__list"> <li><a href="#">Your home</a></li> <li><a href="#">Your community</a></li> <li><a href="#">Our story</a></li> <li><a href="#">Wanaka</a></li> <li><a href="#">Contact</a></li> </ul> <div class="nav__links"> <div class="info-row__item"> <span class="info-row__name">Mark Tutty</span> <a href="tel:0212207246" class="info-row__link">021 220 7246</a> <a href="mailto:mark@3plus.co.nz" class="info-row__link">mark@3plus.co.nz</a> </div> <div class="info-row__item"> <span class="info-row__name">David Reid</span> <a href="tel:0212883244" class="info-row__link">021 288 3244</a> <a href="mailto:david@3plus.co.nz" class="info-row__link">david@3plus.co.nz</a> </div> </div> </nav> <div class="burger-menu" id="trigger'"> <span class="burger-menu__span-first"></span> <span class="burger-menu__span-second"></span> <span class="burger-menu__span-third"></span> </div> </div> </header> <main> <section class="hero-section"> <div class="hero-section__background"> <img src="./assets/img/backgrounds/community-banner.jpg" alt="image"> <div class="hero-section__text-left">44.6943ºS</div> <div class="hero-section__text-right">169.1417ºE</div> </div> <div class="hero-section__container container js-in-viewport-animate-block fade-in"> <h1 class="hero-section__title">Your community</h1> </div> </section> <section class="separator js-in-viewport-animate-block"> <div class="separator__container container"> <div class="separator__inner"> <div class="separator__img"> <img src="./assets/img/icons/icon-item-1.svg" alt="image"> </div> </div> </div> </section> <section class="post post--reverse"> <div class="post__container container"> <div class="post__inner"> <div class="post__text-wrap js-in-viewport-animate-children js-prepare-children-fade-in"> <h2>Your license to roam</h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sed sapien quam. Sed dapibus est id enim facilisis, at posuere turpis adipiscing. Quisque sit amet dui dui. </p> <p> Duis rhoncus velit nec est condimentum feugiat. Donec aliquam augue nec gravida lobortis. Nunc arcu mi, pretium quis dolor id, iaculis euismod ligula. Donec tincidunt gravida lacus eget lacinia. </p> <p> Cras et dui mollis, tempus velit placerat, sodales tellus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque et venenatis sapien. Maecenas sem diam, lacinia in ipsum et, fermentum rutrum lacus. </p> <p> Nulla facilisis, arcu ac facilisis tincidunt, tortor est congue ligula, eu adipiscing quam ligula ut purus. Suspendisse at gravida dolor. Vestibulum eget odio in massa luctus imperdiet. Donec consequat orci a diam pellentesque mollis. </p> <p> Nulla nec varius dui. Aliquam erat volutpat. Nunc at viverra nisi, id lobortis quam. Aenean hendrerit fermentum nibh nec lobortis. </p> <p> Cras et dui mollis, tempus velit placerat, sodales tellus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque et venenatis sapien. Maecenas sem diam, lacinia in ipsum et, fermentum rutrum lacus. </p> </div> <div class="post__img-wrap js-in-viewport-animate-children js-prepare-children-fade-in"> <div class="post__img"> <img src="./assets/img/others/community-post-1.jpg" alt="image"> </div> <div class="post__img"> <video loop autoplay muted poster="./assets/img/others/community-post-2.jpg"> <source data-src="./assets/video/test-video.mp4" type="video/mp4"> Your browser does not support the video tag. </video> </div> <div class="post__img"> <img src="./assets/img/others/community-post-3.jpg" alt="image"> </div> </div> </div> </div> </section> <section class="separator js-in-viewport-animate-block"> <div class="separator__container container"> <div class="separator__inner"> <div class="separator__img"> <img src="./assets/img/icons/icon-item-3.svg" alt="image"> </div> </div> </div> </section> <section class="content"> <div class="content__container container"> <div class="content__inner js-in-viewport-animate-children js-prepare-children-fade-in"> <div class="content__text-wrap js-in-viewport-animate-children js-prepare-children-fade-in"> <h2>Yours to own</h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sed sapien quam. Sed dapibus est id enim facilisis, at posuere turpis adipiscing. Quisque sit amet dui dui. </p> <p> Duis rhoncus velit nec est condimentum feugiat. Donec aliquam augue nec gravida lobortis. Nunc arcu mi, pretium quis dolor id, iaculis euismod ligula. Donec tincidunt gravida lacus eget lacinia. </p> <p> Cras et dui mollis, tempus velit placerat, sodales tellus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque et venenatis sapien. Maecenas sem diam, lacinia in ipsum et, fermentum rutrum lacus. </p> <p> Nulla facilisis, arcu ac facilisis tincidunt, tortor est congue ligula, eu adipiscing quam ligula ut purus. Suspendisse at gravida dolor. Vestibulum eget odio in massa luctus imperdiet. Donec consequat orci a diam pellentesque mollis. </p> </div> <div class="content__img-wrap"> <img src="./assets/img/others/community-item-1.jpg" alt="image"> </div> </div> <div class="content__gallery js-in-viewport-animate-children js-prepare-children-fade-in"> <div class="content__img"> <img src="./assets/img/others/community-item-2.jpg" alt="image"> </div> <div class="content__img"> <img src="./assets/img/others/community-item-3.jpg" alt="image"> </div> <div class="content__img"> <img src="./assets/img/others/community-item-4.jpg" alt="image"> </div> </div> </div> </section> <section class="separator js-in-viewport-animate-block"> <div class="separator__container container"> <div class="separator__inner"> <div class="separator__img"> <img src="./assets/img/icons/icon-item-4.svg" alt="image"> </div> </div> </div> </section> <section class="content content--without-images"> <div class="content__container container"> <div class="content__inner"> <div class="content__text-wrap js-in-viewport-animate-children js-prepare-children-fade-in"> <h2>Just bring your toothbrush</h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sed sapien quam. Sed dapibus est id enim facilisis, at posuere turpis adipiscing. Quisque sit amet dui dui. </p> <p> Duis rhoncus velit nec est condimentum feugiat. Donec aliquam augue nec gravida lobortis. Nunc arcu mi, pretium quis dolor id, iaculis euismod ligula. Donec tincidunt gravida lacus eget lacinia. </p> <p> Cras et dui mollis, tempus velit placerat, sodales tellus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque et venenatis sapien. Maecenas sem diam, lacinia in ipsum et, fermentum rutrum lacus. </p> <p> Nulla facilisis, arcu ac facilisis tincidunt, tortor est congue ligula, eu adipiscing quam ligula ut purus. Suspendisse at gravida dolor. Vestibulum eget odio in massa luctus imperdiet. Donec consequat orci a diam pellentesque mollis. </p> </div> <div class="content__img-wrap js-in-viewport-animate-children js-prepare-children-fade-in"> <img src="./assets/img/others/community-item-5.jpg" alt="image"> </div> </div> </div> </section> <section class="separator js-in-viewport-animate-block"> <div class="separator__container container"> <div class="separator__inner"> <div class="separator__img"> <img src="./assets/img/icons/icon-item-2.svg" alt="image"> </div> </div> </div> </section> <section class="banner banner--overlay"> <div class="banner__wrap"> <img src="./assets/img/backgrounds/wanaka-banner.jpg" alt="image"> </div> </section> <section class="propositions"> <div class="propositions__container container js-in-viewport-animate-children js-prepare-children-fade-in"> <h2 class="propositions__title">Away from it all, but still close</h2> <div class="propositions__wrap js-in-viewport-animate-children js-prepare-children-fade-in"> <div class="offer-item offer-item--propositions js-in-viewport-animate-children js-prepare-children-fade-in"> <h3>Wanaka township</h3> <p> Lakefront walks, shopping, activities… orem ipsum dolor sit amet, consectetur adipiscing elit. Cras sed sapien quam. Sed dapibus est id enim facilisis, at posuere turpis adipiscing. Quisque sit amet dui dui. </p> <p> Donec aliquam augue nec gravida lobortis. Nunc arcu mi, pretium quis dolor id, iaculis euismod ligula. Donec tincidunt gravida lacus eget lacinia. </p> </div> <div class="offer-item offer-item--propositions js-in-viewport-animate-children js-prepare-children-fade-in"> <h3>Medical centre</h3> <p> Medical centre and pharmacy within one minute drive… ipsum dolor sit amet, consectetur adipiscing elit. Cras sed sapien quam. Sed dapibus est id enim facilisis, at posuere turpis adipiscing. Quisque sit amet dui dui. Duis rhoncus velit nec est condimentum feugiat. Donec aliquam augue nec gravida lobortis. </p> </div> <div class="offer-item offer-item--propositions js-in-viewport-animate-children js-prepare-children-fade-in"> <h3>Three Parks</h3> <p> Grocery shopping, hardware stores, schools… ipsum dolor sit amet, consectetur adipiscing elit. Cras sed sapien quam. Sed dapibus est id enim facilisis, at posuere turpis adipiscing. Quisque sit amet dui dui. </p> <p> Duis rhoncus velit nec est condimentum feugiat. Donec aliquam augue nec gravida lobortis. Nunc arcu mi, pretium quis dolor id, iaculis euismod ligula. Donec tincidunt gravida lacus eget lacinia. </p> </div> <div class="offer-item offer-item--propositions js-in-viewport-animate-children js-prepare-children-fade-in"> <h3>Cafés and dining</h3> <p> Florences Café, Lipsky and Sons… em ipsum dolor sit amet, consectetur adipiscing elit. Cras sed sapien quam. Sed dapibus est id enim facilisis, at posuere turpis adipiscing. Quisque sit amet dui dui. </p> <p> Duis rhoncus velit nec est condimentum feugiat. Donec aliquam augue nec gravida lobortis. </p> </div> </div> </div> </section> <section class="gallery gallery--community"> <div class="gallery__container container"> <div class="gallery__wrap js-in-viewport-animate-children js-prepare-children-fade-in"> <div class="gallery__row"> <div class="gallery__item--fit-left gallery__item"> <img src="./assets/img/others/community-gallery-1.jpg" alt="image"> </div> <div class=" gallery__item gallery__item--fit-right"> <img src="./assets/img/others/community-gallery-2.jpg" alt="image"> </div> </div> <div class="gallery__row"> <div class="gallery__item"> <img src="./assets/img/others/community-gallery-3.jpg" alt="image"> </div> <div class="gallery__item--fit-right gallery__item"> <img src="./assets/img/others/community-gallery-4.jpg" alt="image"> </div> </div> </div> </div> </section> <section class="comment"> <div class="comment__container container container--fw"> <div class="comment__wrap js-in-viewport-animate-children js-prepare-children-fade-in"> <div class="comment__person"> <h4 class="comment__title">Comments from our community.</h4> <div class="comment__img"> <img src="./assets/img/icons/person-item.svg" alt="image"> </div> </div> <div class="comment__content"> <q class="comment__quote"> “Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sed sapien quam. Sed dapibus est id enim facilisis, at posuere turpis adipiscing. Quisque sit amet dui dui.” </q> <span class="comment__author"> — DAVID REID </span> </div> </div> </div> </section> </main> <footer class="footer"> <div class="info-row"> <div class="info-row__container container container--fw"> <div class="info-row__inner"> <div class="info-row__logo-wrap"> <a href="#" class="info-row__logo"> <img src="./assets/img/icons/logo-white.svg" alt="image"> </a> </div> <div class="info-row__list"> <p class="info-row__title">Sales enquiries.</p> <div class="info-row__wrap"> <div class="info-row__item"> <p class="info-row__name">Mark Tutty</p> <a href="tel:0212207246" class="info-row__link">021 220 7246</a> <a href="mailto:mark@3plus.co.nz" class="info-row__link">mark@3plus.co.nz</a> </div> <div class="info-row__item"> <p class="info-row__name">David Reid</p> <a href="tel:0212883244" class="info-row__link">021 288 3244</a> <a href="mailto:david@3plus.co.nz" class="info-row__link">david@3plus.co.nz</a> </div> <div class="info-row__item--map info-row__item"> <form action="#" class="form"> <div class="form__item-wrap field"> <input type="text" placeholder="Your name"> </div> <div class="form__item-wrap field"> <input type="email" placeholder="Email"> </div> <div class="form__item-wrap field"> <input type="number" placeholder="Phone"> </div> <div class="form__item-wrap field"> <textarea class="form__text" placeholder="Your message"></textarea> </div> <div class="form__check-wrap"> <label class="container">I agree to receive marketing communications <input type="checkbox" checked="checked"> <span class="checkmark"></span> </label> </div> <button class="form__btn" type="submit"> Send <img src="./assets/img/icons/long-arrow-right.svg" alt="image"> </button> </form> </div> <div class="info-row__item--row info-row__item"> <a href="https://goo.gl/maps/6qkKVqP1hGumpMFq7" class="info-row__link">The Terrace Deans Drive Wanaka 9305 New Zealand</a> <a href="#" class="info-row__link-img--mobile-visible info-row__link-img"> <img src="./assets/img/icons/facebook-icon.svg" alt="image"> </a> </div> <div class="info-row__item"> <a href="#" class="info-row__link-img--mobile-hidden info-row__link-img"> <img src="./assets/img/icons/facebook-icon.svg" alt="image"> </a> </div> </div> </div> <nav class="nav--footer nav"> <ul class="nav__list"> <li><a href="#">Your home</a></li> <li><a href="#">Your community</a></li> <li><a href="#">Our story</a></li> <li><a href="#">Wanaka</a></li> <li><a href="#">Contact</a></li> </ul> </nav> </div> </div> </div> <div class="map-row"> <div class="map-row__container container container--fw"> <div class="map-row__inner"> <div class="map-row__form-block"> <form class="form--hidden form"> <div class="form__item-wrap field"> <input type="text" placeholder="Your name"> </div> <div class="form__item-wrap field"> <input type="email" placeholder="Email" class="form__input"> </div> <div class="form__item-wrap field"> <input type="number" placeholder="Phone"> </div> <div class="form__item-wrap field"> <textarea placeholder="Your message"></textarea> </div> <div class="form__check-wrap"> <label class="container">I agree to receive marketing communications <input type="checkbox" checked="checked"> <span class="checkmark"></span> </label> </div> <button class="form__btn" type="submit"> Send <img src="./assets/img/icons/long-arrow-right.svg" alt="image"> </button> </form> <div class="map-row__copyright-wrap"> <div class="map-row__common-img"> <img src="./assets/img/icons/common.svg" alt="image"> </div> <p class="map-row__copyright">©2021 The Terrace, Wanaka. Created by <a href="#">Fluid</a>.</p> </div> </div> <div class="map-row__map"> <div class="map-row__map-wrap"> <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d2835.3786336500584!2d169.140992!3d-44.7118835!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xa9d5497d5043c24d%3A0xf2aa9ccfb9e4b09f!2sAlpine%20Estate!5e0!3m2!1sen!2sua!4v1614448552625!5m2!1sen!2sua" style="border:0;" allowfullscreen="" loading="lazy"></iframe> </div> </div> </div> </div> </div> </footer> <script src="js/main.js"></script> </body> </html> Save