Gel4y Mini Shell

Edit file

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

</head>

<nav class="nav">
        <div class="nav__top">
            <a href="#" class="nav__logo">
                <img width="549" height="391" src="assets/img/logo/logo-white.svg" alt="logo">
            </a>
            <div class="nav__close js-menu-toggle">
                <img width="300" height="120" src="assets/img/icons/close.svg" alt="close">
            </div>
        </div>
        <div class="nav__inner">
            <a href="#" class="nav__item">
                <div class="nav__img">
                    <img width="549" height="391" src="assets/img/nav/img-1.png" alt="image">
                </div>
                <div class="nav__icon">
                    <img width="300" height="120" src="assets/img/text-with-items/logo-2.svg" alt="icon">
                </div>
            </a>
            <a href="#" class="nav__item">
                <div class="nav__img">
                    <img width="549" height="391" src="assets/img/nav/img-2.png" alt="image">
                </div>
                <div class="nav__icon">
                    <img width="300" height="120" src="assets/img/text-with-items/logo-1.svg" alt="icon">
                </div>
            </a>
            <a href="#" class="nav__item">
                <div class="nav__img">
                    <img width="549" height="391" src="assets/img/nav/img-3.png" alt="image">
                </div>
                <div class="nav__icon">
                    <img width="300" height="120" src="assets/img/text-with-items/logo-3.svg" alt="icon">
                </div>
            </a>
            <a href="#" class="nav__item">
                <div class="nav__img">
                    <img width="549" height="391" src="assets/img/nav/img-4.png" alt="image">
                </div>
                <div class="nav__icon">
                    <img width="300" height="120" src="assets/img/text-with-items/logo-4.svg" alt="icon">
                </div>
            </a>
            <a href="#" class="nav__item">
                <div class="nav__img">
                    <img width="549" height="391" src="assets/img/nav/img-5.png" alt="image">
                </div>
                <div class="nav__icon">
                    <img width="300" height="120" src="assets/img/text-with-items/logo-5.svg" alt="icon">
                </div>
            </a>
            <a href="#" class="nav__item">
                <div class="nav__img">
                    <img width="549" height="391" src="assets/img/nav/img-6.png" alt="image">
                </div>
                <div class="nav__text">
                    <h4>Contact</h4>
                </div>
            </a>
        </div>
    </nav>

<section class="hero-large">
            <div class="hero-large__media">
                <video loop autoplay muted poster="assets/img/hero/video-placeholder.jpg">
                    <source data-src="assets/video/test-video.mp4" type="video/mp4">
                    Your browser does not support the video tag.
                </video>
                <img src="assets/img/hero/video-placeholder.jpg" alt="img">
            </div>
        </section>

<section class="text-with-items paralax">
            <div class="text-with-items__content paralax-text">
                <h2>Feed your adventure <br>
                    with the The Bike Matrix</h2>
            </div>
            <div class="text-with-items__items paralax-content">
                <div class="text-with-items__item">
                    <div class="text-with-items__img">
                        <img width="315" height="390" class="lazy" data-src="assets/img/text-with-items/img-1.jpg"
                            alt="image">
                    </div>
                    <div class="text-with-items__wrapper">
                        <div class="text-with-items__icon">
                            <img width="300" height="119" class="lazy"
                                data-src="assets/img/text-with-items/logo-1.svg" alt="icon">
                        </div>
                        <div class="text-with-items__btns">
                            <a href="#" class="btn btn--white">VISIT SITE</a>
                            <a href="#" class="btn">LEARN MORE</a>
                        </div>
                    </div>
                </div>
                <div class="text-with-items__item">
                    <div class="text-with-items__img">
                        <img width="315" height="390" class="lazy" data-src="assets/img/text-with-items/img-2.jpg"
                            alt="image">
                    </div>
                    <div class="text-with-items__wrapper">
                        <div class="text-with-items__icon">
                            <img width="300" height="119" class="lazy"
                                data-src="assets/img/text-with-items/logo-2.svg" alt="icon">
                        </div>
                        <div class="text-with-items__btns">
                            <a href="#" class="btn btn--white">VISIT SITE</a>
                            <a href="#" class="btn">LEARN MORE</a>
                        </div>
                    </div>
                </div>
                <div class="text-with-items__item">
                    <div class="text-with-items__img">
                        <img width="315" height="390" class="lazy" data-src="assets/img/text-with-items/img-3.jpg"
                            alt="image">
                    </div>
                    <div class="text-with-items__wrapper">
                        <div class="text-with-items__icon">
                            <img width="300" height="119" class="lazy"
                                data-src="assets/img/text-with-items/logo-3.svg" alt="icon">
                        </div>
                        <div class="text-with-items__btns">
                            <a href="#" class="btn btn--white">VISIT SITE</a>
                            <a href="#" class="btn">LEARN MORE</a>
                        </div>
                    </div>
                </div>
                <div class="text-with-items__item">
                    <div class="text-with-items__img">
                        <img width="315" height="390" class="lazy" data-src="assets/img/text-with-items/img-4.jpg"
                            alt="image">
                    </div>
                    <div class="text-with-items__wrapper">
                        <div class="text-with-items__icon">
                            <img width="300" height="119" class="lazy"
                                data-src="assets/img/text-with-items/logo-4.svg" alt="icon">
                        </div>
                        <div class="text-with-items__btns">
                            <a href="#" class="btn btn--white">VISIT SITE</a>
                            <a href="#" class="btn">LEARN MORE</a>
                        </div>
                    </div>
                </div>
                <div class="text-with-items__item">
                    <div class="text-with-items__img">
                        <img width="315" height="390" class="lazy" data-src="assets/img/text-with-items/img-5.jpg"
                            alt="image">
                    </div>
                    <div class="text-with-items__wrapper">
                        <div class="text-with-items__icon">
                            <img width="300" height="119" class="lazy"
                                data-src="assets/img/text-with-items/logo-5.svg" alt="icon">
                        </div>
                        <div class="text-with-items__btns">
                            <a href="#" class="btn btn--white">VISIT SITE</a>
                            <a href="#" class="btn">LEARN MORE</a>
                        </div>
                    </div>
                </div>
            </div>
        </section>

<section class="contact">
            <div class="contact__inner md:flex md:justify-between">
                <div class="contact__text">
                    <h2>Sign up to our <br> mailing list</h2>
                </div>
                <div class="contact__contact">
                    <p>From daily specials to special promotions, The Bike Matrix newsletter keeps you informed and
                        inspired
                        on your journey. Don’t miss out – sign up today, or visit us on Facebook and Instagram.</p>
                    <div class="form">
                        <form action="#">
                            <label class="field">
                                <input type="text" placeholder="First name *">
                            </label>
                            <label class="field">
                                <input type="text" placeholder="Last name *">
                            </label>
                            <label class="field field--fw">
                                <input type="email" placeholder="Email *">
                            </label>
                            <div class="form__foot">
                                <button class="btn">SIGN UP</button>
                                <div class="form__socials">
                                    <a href="#" class="form__link">
                                        <img width="150" height="150" class="lazy"
                                            data-src="assets/img/icons/facebook.svg" alt="image">
                                    </a>
                                    <a href="#" class="form__link">
                                        <img width="150" height="150" class="lazy"
                                            data-src="assets/img/icons/instagram.svg" alt="image">
                                    </a>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </section>

<section class="icon-with-content">
            <div class="icon-with-content__content flex flex-col items-center">
                <div class="icon-with-content__icon" id="icon-rotate">
                    <img width="300" height="131" class="lazy" data-src="assets/img/logo/logo-blue.svg" alt="logo">
                </div>
                <div class="icon-with-content__text">
                    <h3>Step inside and discover a world of biking experiences to feed your obsession. Whether you’re
                        craving an adrenaline-fueled Heli-biking excursion or a leisurely ride through scenic trails,
                        The Bike Matrix has something for everyone.</h3>
                </div>
            </div>
            <div class="icon-with-content__vector">
                <img width="612" height="1400" class="lazy" data-src="assets/img/icon-with-content-img.svg"
                    alt="image">
            </div>
        </section>

<section class="text-with-map">
            <div class="text-with-map__inner md:flex md:justify-between">
                <div class="text-with-map__text">
                    <h2>Visit us at <br>
                        The Bike Matrix</h2>
                    <p>Gear up at Handlebar Eatery, connect with fellow cyclists, book an adventure or plan your next
                        event.
                        Join us at The Bike Matrix and let the journey begin.</p>
                    <a href="#" class="btn btn--white">CONTACT US</a>
                </div>
                <div class="text-with-map__map">
                    <div class="map" id="map"></div>
                </div>
            </div>
        </section>

</main>

<footer class="footer">
        <div class="footer__line">
            <img width="1920" height="140" class="lazy" data-src="assets/img/footer-line.png" alt="image">
        </div>
        <a href="#" class="footer__logo">
            <img width="230" height="150" class="lazy" data-src="assets/img/logo/logo-white.svg" alt="logo">
        </a>
        <div class="footer__main">
            <ul class="footer__links">
                <li><a href="#">Handlebar Eatery</a></li>
                <li><a href="#">Better by Bike</a></li>
                <li><a href="#">Heli Bike</a></li>
                <li><a href="#">Venue</a></li>
                <li><a href="#">Additional Business</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
            <div class="footer__wrapper footer__wrapper--with-socials">
                <a href="#">
                    211A Glenda Drive <br>
                    Frankton <br>
                    Queenstown
                </a>
                <a href="#">+XX XXXX XXXXX</a>
                <a href="#" class="underlined">View in Maps</a>

<div class="footer__socials footer__socials--mobile">
                    <a href="#" class="footer__social">
                        <img width="150" height="150" class="lazy" data-src="assets/img/icons/facebook.svg"
                            alt="icon">
                    </a>
                    <a href="#" class="footer__social">
                        <img width="150" height="150" class="lazy" data-src="assets/img/icons/instagram.svg"
                            alt="icon">
                    </a>
                    <a href="#" class="footer__social">
                        <img width="150" height="150" class="lazy" data-src="assets/img/icons/youtube.svg" alt="icon">
                    </a>
                    <a href="#" class="footer__social">
                        <img width="150" height="150" class="lazy" data-src="assets/img/icons/owl.svg" alt="icon">
                    </a>
                </div>
            </div>
            <div class="footer__wrapper footer__wrapper--table">
                <h4>Opening Hours</h4>
                <ul>
                    <li>Monday – xx-xx</li>
                    <li>Monday – xx-xx</li>
                    <li>Monday – xx-xx</li>
                    <li>Monday – xx-xx</li>
                    <li>Monday – xx-xx</li>
                    <li>Monday – xx-xx</li>
                    <li>Monday – xx-xx</li>
                </ul>

</div>
            <div class="footer__socials footer__socials--desk">
                <a href="#" class="footer__social">
                    <img width="150" height="150" class="lazy" data-src="assets/img/icons/facebook.svg" alt="icon">
                </a>
                <a href="#" class="footer__social">
                    <img width="150" height="150" class="lazy" data-src="assets/img/icons/instagram.svg" alt="icon">
                </a>
                <a href="#" class="footer__social">
                    <img width="150" height="150" class="lazy" data-src="assets/img/icons/youtube.svg" alt="icon">
                </a>
                <a href="#" class="footer__social">
                    <img width="150" height="150" class="lazy" data-src="assets/img/icons/owl.svg" alt="icon">
                </a>
            </div>
        </div>
        <div class="footer__bottom">
            <div class="footer__copyright">
                ©2024 The Bike Matrix. Created by <a href="#">Fluid</a>
            </div>
            <ul>
                <li><a href="#">Terms & Conditions</a></li>
                <li><a href="#">Privacy Policy</a></li>
                <li><a href="#">Cookie Policy</a></li>
            </ul>
        </div>
    </footer>

</body>

</html>