index.html

﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="resources/images/favicon-32x32.png" type="image/x-icon">
    <link rel="stylesheet" href="styles/style.css">
    <title>Huddle</title>
</head>
<body>
    <header class="header">
        <section class="header__nav">
            <figure class="header__logo">
                <img src="/resources/images/logo.svg" alt="svg" width="125px" height="15px">
            </figure>
            <button class="btn btn--black-acent">Try it Free</button>
        </section>
        <section class="header__body">
           <div class="col-1">
                <h2 class="header__title">Build The Community Your Fans Will Love</h2>
                <p class="header__text">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsam quas explicabo corrupti dolore. Consequatur blanditiis aliquid tempora, facilis dicta id reprehenderit totam</p>
                <button class="btn btn--bg-pink btn--large">Try it For Free</button>
           </div>
           <div class="col-2">
                <figure class="header__svg">
                    <img src="/resources/images/illustration-mockups.svg" alt="svg" width="250px" height="200px">
                </figure>
        </div>
        </section>
    </header>
    <main class="main">
        <section class="main__section one">
            <div class="row-1">
                <h3 class="main__title">Grow Together</h3>
                <p class="main__text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas in quisquam dolor quidem voluptatem officiis ea, itaque vel fugiat beatae?</p>
            </div>
            <div class="row-2">
                <figure class="main__svg">
                    <img src="/resources/images/illustration-grow-together.svg" alt="first svg"
                    width="250px" height="250px">
                </figure>
            </div>
        </section>
        <section class="main__section two">
            <div class="row-1">
                <h3 class="main__title">Grow Together</h3>
                <p class="main__text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas in quisquam dolor quidem voluptatem officiis ea, itaque vel fugiat beatae?</p>
            </div>
            <div class="row-2">
                <figure class="main__svg">
                    <img src="/resources/images/illustration-flowing-conversation.svg" alt="second svg"
                    width="250px" height="250px"
                    >
                </figure>
            </div>
        </section>
        <section class="main__section three">
            <div class="row-1">
                <h3 class="main__title">Grow Together</h3>
                <p class="main__text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas in quisquam dolor quidem voluptatem officiis ea, itaque vel fugiat beatae?</p>
            </div>
            <div class="row-2">
                <figure class="main__svg">
                    <img src="/resources/images/illustration-your-users.svg" alt="third svg"
                    width="250px" height="250px">
                </figure>
            </div>
        </section>
    </main>
    <footer class="footer">
        <section class="footer__overlap">
            <h3 class="footer__title">Ready To Build Your Community</h3>
            <button class="btn btn--bg-pink btn--large">Get Started By clicking</button>
        </section>
        <section class="footer__container">
            <div class="footer__first">
                <figure class="footer__logo">
                    <img src="/resources/images/logo.svg" alt="" width="80px" height="35px">
                </figure>
                <i>
                    <img src="/resources/images/icon-location.svg" alt="" class="float-left">
                    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nisi quasi volupta
                    </p>
                </i>
                <i>
                    <img src="/resources/images/icon-phone.svg" alt="" class="float-left">
                    <p>+234 7989 6784</p>
                </i>
                <i>
                    <img src="/resources/images/icon-email.svg" alt="" class="float-left">
                    <p>email</p>
                </i>
            </div>
            <div class="footer__second">
                <ul>
                    <li>About us</li>
                    <li>Blog</li>
                    <li>Facts</li>
                </ul>
                <ul>
                    <li>Address</li>
                    <li>Help</li>
                    <li>Contact us</li>
                </ul>
            </div>
            <div class="footer__third">
                <div class="footer__socials">
                    <i>
                        <img src="/resources/images/twitter-brands.svg" alt="twiiter" width="50px" height="50px">
                    </i>
                    <i>
                        <img src="/resources/images/instagram-brands.svg" alt="instagram"  width="50px" height="50px">
                    </i>
                    <i>
                        <img src="/resources/images/facebook-f-brands.svg" alt="facebooh"  width="50px" height="50px">
                    </i>
                </div>
                <div class="footer__copyrights">
                    <p>&copy;Weng Davo</p>
                </div>
            </div>
        </section>
    </footer>
</body>
</html>