Gel4y Mini Shell

Edit file

File name : index.html

Content :

<!doctype html>
<html lang="en">

<body>
    <main>
        <section class="hero">
            <div class="hero__container container">
                <div class="hero__text">
                    <div class="hero__logo">
                        <img src="./assets/img/logo.svg" alt="img">
                    </div>
                    <h1>Mobile & Web Design Service
                        to Present your company in
                        the Digital World<img src="./assets/img/icons/racket.png" alt="img"> <img
                            src="./assets/img/icons/stars.png" alt="img">
                    </h1>
                    <p>
                        Let's start something completely new together
                    </p>
                    <div class="hero__btn">
                        <a href="#" class=" btn btn--purple">Read Details</a>
                    </div>
                </div>
                <div class="hero__img">
                    <img src="./assets/img/hero/blog.jpg" alt="img">

</section>
        <section class="accordion">
            <div class="accordion1"></div>
            <div class="accordion__container container">
                <div class="accordion__sticky-wrapper">
                    <div class="accordion__sticky">
                        <h2>Here are all the
                            competencies we have got
                            inside our team
                        </h2>
                        <div class="accordion__animate-arrow">
                            <svg width="103" height="107" viewBox="0 0 103 107" fill="none"
                                xmlns="http://www.w3.org/2000/svg">
                                <path class="services-arrow-path-1" id="arrow"
                                    d="M14.826 3.3137C30.2637 1.45035 65.3846 12.7281 73.5767 31.598C83.8169 55.1853 63.0755 74.886 51.8815 65.0789C40.6876 55.2719 73.6844 29.8769 83.3363 102.453"
                                    stroke="#18161E" stroke-width="3"
                                    style="stroke-dasharray: 198.337px; stroke-dashoffset: 198.337px;"></path>
                                <path id="arrow1" class="services-arrow-path-2"
                                    d="M90.162 97.0736L82.9856 104.61L75.8704 97.8348" stroke="#18161E" stroke-width="3"
                                    style="stroke-dasharray: 20.2316px; stroke-dashoffset: 20.2316px;"></path>
                            </svg>
                        </div>
                    </div>
                </div>
                <div class="accordion__accordion">
                    <div class="accordion__item">
                        <div class="accordion__header">
                            <div class="accordion__title">
                                <img class="lazy" data-src="./assets/img/icons/tel.png" alt="img">
                                <h4>App Design</h4>
                            </div>
                            <div class="accordion__arrow">
                                <img class="lazy" data-src="./assets/img/icons/accordion-svg.svg" alt="img">
                            </div>
                        </div>
                        <div class="accordion__content">
                            In a modern world, a strong visual identity defines your product success. Branding enables
                            companies to maintain consistency
                            across all the customer touchpoints and remain unique.
                        </div>
                    </div>
                    <div class="accordion__item">
                        <div class="accordion__header">
                            <div class="accordion__title">
                                <img class="lazy" data-src="./assets/img/icons/macbook.png" alt="img">
                                <h4>Web Design</h4>
                            </div>
                            <div class="accordion__arrow">
                                <img class="lazy" data-src="./assets/img/icons/accordion-svg.svg" alt="img">
                            </div>
                        </div>
                        <div class="accordion__content">
                            We use various research methodologies to maintain close collaboration with users. Process
                            Agility allows us to adopt the product
                            accordingly and make sure we create products that customers love.
                        </div>
                    </div>
                    <div class="accordion__item">
                        <div class="accordion__header">
                            <div class="accordion__title">
                                <img class="lazy" data-src="./assets/img/icons/pazzle.png" alt="img">
                                <h4>Dashboard Design</h4>
                            </div>
                            <div class="accordion__arrow">
                                <img class="lazy" data-src="./assets/img/icons/accordion-svg.svg" alt="img">
                            </div>
                        </div>
                        <div class="accordion__content">
                            Slick will make sure user's interaction with a company's products is smooth and enjoyable.
                            We don’t hesitate to analyze
                            products in depth creating relevant experiences for your audience.
                        </div>
                    </div>
                    <div class="accordion__item">
                        <div class="accordion__header">
                            <div class="accordion__title">
                                <img class="lazy" data-src="./assets/img/icons/run.png" alt="img">
                                <h4>Motion Design</h4>
                            </div>
                            <div class="accordion__arrow">
                                <img class="lazy" data-src="./assets/img/icons/accordion-svg.svg" alt="img">
                            </div>
                        </div>
                        <div class="accordion__content">
                            It’s hard to be simple. Slick ensures design to be minimalistically gorgeous and fully
                            reflect the brand personality.
                        </div>
                    </div>
                    <div class="accordion__item">
                        <div class="accordion__header">
                            <div class="accordion__title">
                                <img class="lazy" data-src="./assets/img/icons/stars.png" alt="img">
                                <h4>Visual Branding</h4>
                            </div>
                            <div class="accordion__arrow">
                                <img class="lazy" data-src="./assets/img/icons/accordion-svg.svg" alt="img">
                            </div>
                        </div>
                        <div class="accordion__content">
                            Frontend team understands your business objectives and creates top-notch solutions that meet
                            your needs. Our developers rarely
                            say no to design teams’ ambitious demands.
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <section class="grid-with-news">
            <div class="grid-with-news__container container">
                <div class="grid-with-news__title">
                    <h3>
                        Latest stories, insights and
                        Dribbble shots from us <img src="./assets/img/icons/story.png" alt="img">
                    </h3>
                </div>
                <div class="grid-with-news__nav">
                    <ul>
                        <li class="grid-with-news__link grid-with-news__link--active"><a href="#">App Design</a></li>
                        <li class="grid-with-news__link"><a href="#">Web Design</a></li>
                        <li class="grid-with-news__link"><a href="#">Dashboard Design</a></li>
                        <li class="grid-with-news__link"><a href="#">Motion Design</a></li>
                        <li class="grid-with-news__link"><a href="#">Visual Branding</a></li>
                    </ul>
                </div>
                <div class="grid-with-news__grid">
                    <a href="#modal-subscribe-form" class="grid-with-news__item">
                        <div class="grid-with-news__img">
                            <img class="lazy" data-src="./assets/img/paralax/img1.png" alt="img">
                        </div>
                        <p>Real Estate Platform Landing on <span>Dribbble</span></p>
                    </a>
                    <a href="#modal-subscribe-form" class="grid-with-news__item">
                        <div class="grid-with-news__img">
                            <img class="lazy" data-src="./assets/img/paralax/img2.png" alt="img">
                        </div>
                        <p>Paysub Onboarding on <span>Behance</span> </p>
                    </a>
                    <a href="#modal-subscribe-form" class="grid-with-news__item">
                        <div class="grid-with-news__img">
                            <img class="lazy" data-src="./assets/img/paralax/img3.png" alt="img">
                        </div>
                        <p>Stock Trading Concept App on <span>Dribbble</span></p>
                    </a>
                    <a href="#modal-subscribe-form" class="grid-with-news__item">
                        <div class="grid-with-news__img">
                            <img class="lazy" data-src="./assets/img/paralax/img4.png" alt="img">
                        </div>
                        <p>Stock Trading Concept App on <span>Dribbble</span></p>
                    </a>
                    <a href="#modal-subscribe-form" class="grid-with-news__item">
                        <div class="grid-with-news__img">
                            <img class="lazy" data-src="./assets/img/paralax/img3.png" alt="img">
                        </div>
                        <p>Stock Trading Concept App on <span>Dribbble</span></p>
                    </a>
                    <a href="#modal-subscribe-form" class="grid-with-news__item">
                        <div class="grid-with-news__img">
                            <img class="lazy" data-src="./assets/img/paralax/img.png" alt="img">
                        </div>
                        <p>Stock Trading Concept App on <span>Dribbble</span></p>
                    </a>
                </div>
            </div>
        </section>
        <section class="logos">
            <div class="logos__container container">
                <div class="logos__title" >
                    <h3>Who trust us<img class="lazy" data-src="./assets/img/icons/trust.png" alt="img"></h3>
                </div>
                <div class="logos__flex">
                    <div class="logos__img">
                        <a href="#" target="_blank">
                            <img class="lazy" data-src="./assets/img/logo/cocacola.svg" alt="img"></a>
                    </div>
                    <div class="logos__img">
                        <a href="#" target="_blank">
                            <img class="lazy" data-src="./assets/img/logo/yoreevo.svg" alt="img"></a>
                    </div>
                    <div class="logos__img">
                        <a href="#" target="_blank">
                            <img class="lazy" data-src="./assets/img/logo/bank.png" alt="img"></a>
                    </div>
                    <div class="logos__img">
                        <a href="#" target="_blank">
                            <img class="lazy" data-src="./assets/img/logo/every.svg" alt="img"></a>
                    </div>
                    <div class="logos__img">
                        <a href="#" target="_blank">
                            <img class="lazy" data-src="./assets/img/logo/coast.svg" alt="img"></a>
                    </div>
                    <div class="logos__img">
                        <a href="#" target="_blank">
                            <img class="lazy" data-src="./assets/img/logo/motocho.svg" alt="img"></a>
                    </div>
                    <div class="logos__img">
                        <a href="#" target="_blank">
                            <img class="lazy" data-src="./assets/img/logo/economies.png" alt="img"></a>
                    </div>
                </div>
            </div>
        </section>
        <section class="team">
            <div class="team__container container">
                <div class="team__contact">
                    <div class="team__picture">
                        <div class="team__icon" id="img1">
                            <img class="lazy" data-src="./assets/img/icons/macbook.png" alt="icon">
                        </div>
                        <div class="team__icon" id="img2">
                            <img class="lazy" data-src="./assets/img/icons/racket.png" alt="icon">
                        </div>
                        <div class="team__icon" id="img3">
                            <img class="lazy" data-src="./assets/img/icons/fire.png" alt="icon">
                        </div>
                        <div class="team__icon" id="img4">
                            <img class="lazy" data-src="./assets/img/icons/magic.png" alt="icon">
                        </div>
                    </div>
                    <div class="team__content">
                        <h3>Our team gets this job done! <img class="lazy" data-src="./assets/img/icons/done.png" alt="img"></h3>
                        <h5>Do you have any questions? We're here for you!
                            You can reach us at: <a href="tel:+92965359">0228 / 929-653-59</a>
                        </h5>
                        <a href="#" class="btn btn--with-img">Reserve Call <img class="lazy" data-src="./assets/img/icons/calendar.png" alt="img"></a>
                        <div class="team__btns">
                            <a href="#" class="btn btn--with-img">Call Us <img class="lazy" data-src="./assets/img/icons/call.png" alt="img"></a>
                            <a href="#" class="btn btn--with-img">Message Us<img class="lazy" data-src="./assets/img/icons/meil.png" alt="img"></a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="team__img">
                <img class="lazy" data-src="./assets/img/team.png" alt="img">
            </div>
        </section>
    </main>
    <div id="modal-window" class="modal-window">
        <div class="modal-window__fader"></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">
            </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 id="modal-subscribe-form" class="modal-window__item  modal-window__modal-subscribe-window">
            <div class="modal-subscribe-window">
                <button aria-label="close modal window" class="modal-subscribe-window__close  modal-window__close-icon">
                </button>
                <div class="modal-subscribe-window__img">
                    
                </div>
            </div>
        </div>
    </div>

</body>

</html>