Gel4y Mini Shell

Edit file

File name : blog-post.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>

<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="#"><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

<main>

<section class="hero-small">
            <h1>Journal Article 1</h1>
        </section>

<section class="text-img-columns text-img-columns--full-screen-text text-img-columns--white-bg text-img-columns--small-padding">
            <div class="text-img-columns__content">
                <div class="text-img-columns__text">
                    <p>
                        Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Morbi leo risus, porta ac consectetur <br> ac, vestibulum at eros. Cum sociis natoque penatibus et magnis dis parturient montes.
                    </p>
                </div>
            </div>
        </section>

<section class="single-article">
            <div class="single-article__content">
                <figure class="single-article__image">
                    <img src="./assets/img/banner/image-1.jpg" alt="image">
                </figure>
                <p>
                    Aenean lacinia bibendum nulla sed consectetur. Vestibulum id ligula porta felis euismod semper. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue. Curabitur blandit tempus porttitor. Aenean lacinia bibendum nulla sed consectetur. Maecenas sed diam eget risus varius blandit sit amet non magna. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam id dolor id nibh ultricies vehicula ut id elit.
                </p>
                <p>
                    Curabitur blandit tempus porttitor. Nulla vitae elit libero, a pharetra augue. Donec sed odio dui. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nullam quis risus eget urna mollis ornare vel eu leo. Curabitur blandit tempus porttitor. Donec ullamcorper nulla non metus auctor fringilla. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam porta sem malesuada magna mollis euismod.
                </p>
                <figure class="single-article__image">
                    <img src="./assets/img/banner/image-1.jpg" alt="image">
                </figure>
                <p>
                    Aenean lacinia bibendum nulla sed consectetur. Vestibulum id ligula porta felis euismod semper. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue. Curabitur blandit tempus porttitor. Aenean lacinia bibendum nulla sed consectetur. Maecenas sed diam eget risus varius blandit sit amet non magna. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam id dolor id nibh ultricies vehicula ut id elit.
                </p>
                <p>
                    Curabitur blandit tempus porttitor. Nulla vitae elit libero, a pharetra augue. Donec sed odio dui. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nullam quis risus eget urna mollis ornare vel eu leo. Curabitur blandit tempus porttitor. Donec ullamcorper nulla non metus auctor fringilla. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam porta sem malesuada magna mollis euismod.
                </p>
                <a class="single-article__btn btn" href="#">
                    <img width="70" height="30" class="lazy" data-src="assets/img/hero-bg/plane.svg" alt="image">
                    <span>Find your perfect adventure</span>
                </a>
            </div>
        </section>

<section class="two-columns two-columns--three-columns">
            <div class="two-columns__content">
                <div class="two-columns__title">
                    <h2>More articles</h2>
                </div>
                <div class="two-columns__cards">
                    <a href="#" class="two-columns__card">
                        <div class="two-columns__image-wrapper">
                            <figure class="two-columns__image">
                            </figure>
                        </div>
                        <div class="two-columns__card-body">
                            <div class="two-columns__card-left">
                                <h3>ARTICLE TITLE HERE</h3>
                                <p>
                                    Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cum sociis natoque penatibus et magnis dis.
                                </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 src="./assets/img/banner/image-1.jpg" alt="image">
                            </figure>
                        </div>
                        <div class="two-columns__card-body">
                            <div class="two-columns__card-left">
                                <h3>ARTICLE TITLE HERE</h3>
                                <p>
                                    Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cum sociis natoque penatibus et magnis dis.
                                </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">
                            </figure>
                        </div>
                        <div class="two-columns__card-body">
                            <div class="two-columns__card-left">
                                <h3>ARTICLE TITLE HERE</h3>
                                <p>
                                    Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cum sociis natoque penatibus et magnis dis.
                                </p>
                                <span class="two-columns__card-btn btn btn--outline" href="#">READ MORE</span>
                            </div>
                        </div>
                    </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>

</html>