Gel4y Mini Shell

Edit file

File name : blog-overview.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 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>Milford Scenic Flights Journal</h1>
                </div>
            </div>
        </section>

<section class="text-img-columns text-img-columns--full-screen-text text-img-columns--white-bg text-img-columns--large-padding">
            <div class="text-img-columns__content">
                <div class="text-img-columns__text">
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, <br>consectetur adipiscing elit.
                    </p>
                </div>
            </div>
        </section>

<section class="two-columns two-columns--three-columns two-columns--white--bg two-columns--lagre-padding">
            <div class="two-columns__content">
                <div class="two-columns__actions">
                    <span>Sort by Category</span>
                    <div class="two-columns__buttons">
                        <a class="two-columns__button" href="#">PLACE</a>
                        <a class="two-columns__button" href="#">STORY</a>
                        <a class="two-columns__button" href="#">COMMUNITY</a>
                    </div>
                </div>
                <div class="two-columns__cards">
                    <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>
                    <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">
                            </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>
                    <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">
                            </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>
                    <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 class="two-columns__btns">
                    <a class="two-columns__btn btn two-columns__btn--prev" href="#">
                        PREVIOUS ARTICLES
                    </a>
                    <a class="two-columns__btn btn two-columns__btn--more" href="#">
                        MORE ARTICLES
                    </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>