index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GOZERO</title>
    <link rel="icon" href="LOGO2.png" type="image/x-icon">
    <link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="stylesheet.css">
    <link rel="stylesheet" href="responsive.css">
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
</head>
<body>
    <div class="promote">
        <div class="container">
            <h5> Free Shipping on Indonesia order over Rp 500.000,- .Plastic Free Shipping on all orders. </h5>  
        </div>
    </div>

    <div class="top-wrapper"> 
        <header>
            <div class="container navbar">
                <div class="header-left">
                    <a href="#our-story" class="navbar-item">Our Story</a>
                    <a href="#our-product" class="navbar-item">Our Products</a>
                </div>
    
                <div class="header-middle">
                    <img src="Gozero.png" alt="Gozero" class="logo">
                </div>
                
                <div class="header-right">
                    <a href="#contact-us" class="navbar-item">Contact Us</a>
                    <a href="#gozero" class="navbar-item">#GOZERO</a>
                </div>

                <span class="fa fa-bars fa-lg menu-icon"> </span>
            </div>
        </header>
        <div class="container text-anima">
            <h1> Say <br>
                Goodbye To <br>
                Plastic 
            </h1>
            <p> Simple, Daily Actions, <br>
                Meaningful, Lasting Change</p>
        </div>
    </div>

    <div class="story-wrapper" id="our-story">
        <div class="container">
            <h5 class="section"> who we are </h5>
            <h2 class="title">Our Story</h2>
            <p class="content-story">
                We are realize plastic waste is a huge problem in Indonesia. Home to more than 267 million people,
                it is believed to be the world’s second largest contributor of plastic pollution in earth after China. Nearly 15% of all
                Plastic waste that end up in the oceans comes from Indonesia. So here we are GOZERO Brand, we are 
                an ecosystem of community on a mission to make world less trashy. We believe that access to sustanaible products 
                and resources that positively benefit people and the planet is a basic human right.

                Our goal is to reshape the consumer product landscape, redefine what a truly good product looks
                like, and make natural and plastic free product more accessible, affordable, and convenient for all.
            </p>
        </div>
    </div> 

     <div class="product-wrapper" id="our-product">
        <div class="container">
            <h5 class="section"> all natural and sustanaible sourced </h5>
            <h2 class="title">zero waste products</h2>

            <div class="products">
                <div class="product">
                    <div class="list-product">
                        <img src="product/dish washing brush.jpg" alt="Dish Washing Brush">
                    </div>

                    <div class="txt-content">
                        <p>
                            Scrub your dishes clean without dirtying the environment! 
                            This Dish Brush has fully compostable brush heads which can be replaced when they are all scrubbed out.
                        </p>
                    </div>

                    <div class="btn">
                        <span class="buy-btn"> buy now </span>
                    </div>
                </div>

                <div class="product">
                    <div class="list-product">
                        <img src="product/produce bag bundle.jpg" alt="Dish Washing Brush">
                    </div>

                    <div class="txt-content">
                        <p>
                            bulk dry ingredients, groceries, and other miscellaneous items. These easy to use, 
                            lightweight bags eliminate the need for disposable plastic bags all together.
                        </p>
                    </div>

                    <div class="btn">
                        <span class="buy-btn"> buy now </span>
                    </div>
                </div>

                <div class="product">
                    <div class="list-product">
                        <img src="product/bamboo toothbrush.jpg" alt="Bamboo Toothbrush">
                    </div>

                    <div class="txt-content">
                        <p>
                            A toothbrush, reinvented. Made of bamboo, not plastic, this brush helps to 
                            eliminate one of the most prevalent forms of ocean plastic pollution.
                        </p>
                    </div>

                    <div class="btn">
                        <span class="buy-btn"> buy now </span>
                    </div>
                </div>

                <div class="product">
                    <div class="list-product">
                        <img src="product/bamboo toilet paper.jpg" alt="Bamboo Toilet Paper">
                    </div>

                    <div class="txt-content">
                        <p>
                            27,000 trees get flushed down the toilet daily. Instead, our 3 ply toilet
                             paper is made from unbleached bamboo pulp. It's soft and padded for comfort. 
                        </p>
                    </div>
    
                    <div class="btn">
                        <span class="buy-btn"> buy now </span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="contact-wrapper" id="contact-us">
        <div class="container">
            <div class="contact">
                <div class="contact-item">
                    <div class="contact-img">
                        <img src="product/contact photo.jpg" alt="ContactUs">
                    </div>
                </div>
    
                <div class="contact-item">
                    <div class="contact-form">
                        <h1>Contact Us</h1>
    
                        <form class="form">
                            <p class="form-title"> Name </p>
                            <input type="text" class="form-input">
        
                            <p class="form-title"> Email </p>
                            <input type="text" class="form-input">
        
                            <p class="form-title">Message</p>
                            <textarea name="message" class="form-message" placeholder="Write your message . . ."></textarea>
                        </form>
                        <div class="btn-send">
                            <span class="submit"> Send </span>
                        </div>
                </div>

                </div>
            </div>
        </div>
    </div> 

    <div class="gozero-wrapper" id="gozero">
        <div class="heading">
            <h1>#GOTOZEROWASTECOMMUNITY</h1>
        </div>

        <div class="btn">
            <span class="subscribe"> Subscribe </span>
        </div>
    </div>

    <footer>
        <div class="container footer">
            <div class="footer-left">
                <img src="gozerfooter2.png" alt="Gozero" class="logo">
            </div>

            <div class="footer-middle">
                <a href="#our-story" class="footer-item">Our Story</a>
                <a href="#our-product" class="footer-item">Our Products</a>
                <a href="#contact-us" class="footer-item">Contact Us</a>
            </div>
            
            <div class="footer-right">
                <a href="#" class="footer-item">Instagram</a>
                <a href="#" class="footer-item">Facebook</a>
                <a href="#" class="footer-item">Twitter</a>
            </div>
        </div>

        <div class="copyright">
            <p>@Copyright 2020 GOZERO</p>
        </div>
    </footer> 
</body>
</html>