index.html

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link
        href="https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
        rel="stylesheet">
    <link rel="stylesheet" href="./styles.css">
    <title>Gravity</title>
</head>

<body>
    <header>
        <nav class="site-nav grid">
            <a href="#" class="site-logo"><img src="./assets/Logo.svg" alt="Gravity Logo"></a>
            <div class="searh-btn"></div>
            <div class="burger-btn"></div>
        </nav>
    </header>

    <section id="hero" class="grid">
        <div class="hero-text">
            <h1>Work around you and your team</h1>
            <p>From ads that dance or sing to MTV-like commercials, online advertisers are now using a new type of
                technology “rich media” to attract consumers.</p>
            <a class="button button-hero" href="#">Get Started</a>
        </div>
        <div class="hero-img">

        </div>

        <div class="hero-video-player play__btn"><img src="./assets/player-Placeholder.png" alt=""></div>
        <div class="hero-loader">
            <span class="hero-loader-number">01</span>
            <span class="hero-loader-number">03</span>
        </div>



    </section>
    <section id="about" class="grid">
        <div class="about__placeholder">
            <img src="./assets/about_placeholder.svg" alt="About image">
        </div>
        <div class="section__text about__text">
            <h2>We solve digital problems with an outstanding creative flare</h2>
            <p>The best time to view the moon, obviously, is at night when there are few clouds and the weather is
                accommodating for a long and lasting study.</p>
            <p>For most of us, the idea of astronomy is something we directly connect to “stargazing”, telescopes and
                seeing magnificent displays in the heavens.</p>
            <div class="author">
                <div class="author__avatar">
                    <img src="./assets/user_avatar.png" alt="Author Avatar">
                </div>
                <div class="author__text-info">
                    <div class="author__name">Denis Shepovalov</div>
                    <div class="author__position">Co-Founder & CEO</div>
                </div>
            </div>
        </div>
    </section>

    <section id="services" class="grid">
        <div class="section__name">Services</div>
        <div class="services__introduction grid">
            <h2 class="section__title section__title-services">We love work hard and explore new things that’s why we
                cover lot of things.
                Check our service list and view details</h2>
            <ul class="services__list list__item">
                <li><a href="#">Multimedia</a></li>
                <li><a href="#">Interactive design</a></li>
                <li><a href="#">Packaging</a></li>
                <li><a href="#">Branding</a></li>
                <li><a href="#">Creative Strategy</a></li>
                <li><a href="#">UI/UX </a></li>
                <li><a href="#">Coding</a></li>
            </ul>
        </div>
        <div class="services__slider">
            <div class="slider__content">
                <div class="slide  play__btn slide__active">
                    <img src="./assets/slider/Placeholder.svg" alt="">
                </div>
                <div class="slide">
                    <img src="./assets/slider/Placeholder-1.svg" alt="">
                </div>
            </div>
            <div class="slider__controls">
                <span class="arrow left"></span>
                <span class="arrow"></span>
            </div>
        </div>
    </section>
    <section id="features" class="grid">
        <div class="features__placeholder grid">
            <img class="features__img1" src="./assets/features/Placeholder.png" alt="">
            <img class="features__img2" src="./assets/features/Placeholder_1.png" alt="">
        </div>
        <div class="section__text features__text">
            <h2>Well thought with super easy to use</h2>
            <p>As we approached the palace I could see through the great windows of the first floor the brilliantly
                illuminated audience chamber of Than Kosis. The immense hall was crowded with nobles and their women.
            </p>
            <ul class="features__goals">
                <li><img src="./assets/features/100_icon.svg" alt=""><span>Ultimate Result</span></li>
                <li><img src="./assets/features/Bag_icon.svg" alt=""><span>Minimal Design</span></li>
            </ul>
        </div>

    </section>

    <section id="works" class="grid">
        <div class="section__name">our works</div>

        <div class="works__introduction">
            <h2 class="section__title section__title-works">Discover our Work</h2>
            <ul class="works__list list__item">
                <li><a href="#">All</a></li>
                <li><a href="#">Branding</a></li>
                <li><a href="#">Web</a></li>
                <li><a href="#">Development</a></li>
                <li><a href="#">Films</a></li>
            </ul>
        </div>

        <div class="works__gallery grid">
            <a href="#"><img src="./assets/works/Placeholder-1.png" alt=""></a>
            <a href="#"><img src="./assets/works/Placeholder-2.png" alt=""></a>
            <a href="#"><img src="./assets/works/Placeholder-3.png" alt=""></a>
            <a href="#"><img src="./assets/works/Placeholder-4.png" alt=""></a>
            <a href="#"><img src="./assets/works/Placeholder-5.png" alt=""></a>
            <a href="#"><img src="./assets/works/Placeholder.png" alt=""></a>
        </div>

        <div class="works__footer section__text grid">
            <p>It picks up the words on the page and displays ads that are similar to those words. Then when someone
                either performs an action or clicks on your page you will get paid.</p>
            <div class="button-wrap">
                <a class="button button-works" href="#">see our works</a>
            </div>
        </div>

    </section>

    <div id="testimonials" class="grid">
        <div class="testimonials__wrapper">
            <div class="section__name section__name-testimonials">Testimonials</div>

            <div class="testimonials__text">
                <blockquote class="testimonials__quote">
                    <p>"Professionals in their craft! All products were super great with
                        strong
                        attention to details, and
                        overall vibe"</p>
                </blockquote>
                <div class="testimonials__text-info">
                    <span class="author__name">Polina Kuzina</span>
                    <span class="author__position">Manager at Craftwork</span>
                </div>
            </div>

            <div class="slider__controls">
                <span class="arrow left"></span>
                <span class="arrow"></span>
            </div>
        </div>

        <img class="testimonials__img" src="./assets/testimonials_placeholder.png" alt="">
    </div>
    <section id="clients" class="grid">

        <div class="clients__introduction grid">
            <h2 class="section__title section__title-clients">Our Clients</h2>
            <div class="clients__text">
                <div class="section__name section__name-clients">WE WORKED WITH</div>
                <p>Our favorite brands are our friends! We help them to achieve their goals, they help us to stay sharp.
                </p>
            </div>
        </div>
        <ul class="clients__list">
            <li><img src="./assets/clients/xiaomi.svg" alt="xiaomi"></li>
            <li><img src="./assets/clients/tinder.svg" alt="tinder"></li>
            <li><img src="./assets/clients/apple.svg" alt="apple"></li>
            <li><img src="./assets/clients/nike.svg" alt="nike"></li>
            <li><img src="./assets/clients/amd.svg" alt="amd"></li>
        </ul>
    </section>

    <footer class="footer grid">
        <nav class="footer__navigation">
            <a href="#" class="site-logo"><img src="./assets/footer_logo.svg" alt="Gravity Logo"></a>
            <ul class="footer__navigation-list navigation">
                <li><a href="#">Travel</a></li>
                <li><a href="#">Explore</a></li>
                <li><a href="#">Works</a></li>
                <li><a href="#">About Us</a></li>
                <li><a href="#">Contacts</a></li>
            </ul>

            <div class="contact-us-form">
                <input type="email" placeholder="Your email" class="email-input">
                <button class="button button--contact">SEND</button>
            </div>
        </nav>
        <hr>
        <div class="footer__submenu grid">
            <ul class="submenu__nav navigation">
                <li><a href="#">Terms</a></li>
                <li><a href="#">Promo</a></li>
                <li><a href="#">Download</a></li>
                <li><a href="#">News</a></li>
            </ul>

            <ul class="submenu__socials">
                <li><a href="#"><img src="./assets/Icon/Social/Twitter.svg" alt=""></a></li>
                <li><a href="#"><img src="./assets/Icon/Social/Linkedin.svg" alt=""></a></li>
                <li><a href="#"><img src="./assets/Icon/Social/Google.svg" alt=""></a></li>
                <li><a href="#"><img src="./assets/Icon/Social/Facebook.svg" alt=""></a></li>
            </ul>
        </div>
    </footer>

</body>

</html>