frontend/index.html

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

	<meta charset="UTF-8" />

        <title>Disaster donations</title>

        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="style.css" rel="stylesheet" type="text/css" />

    </head>
    <body>

        <div id="grid">

            <div id="title">
                <h1>Donate</h1>
            </div>

            <div id="menu">
                <ul>
                    <li><a href="./index.html">Home</a></li>
                    <li><a href="./donate.html">Donate</a></li>
                </ul>
            </div>

            <div id="your">
                <p>Your donation helps us provide shelter, food and comfort to families.<p>
            </div>

            <div id="don1">
                <h2>So far, your generosity has helped collect</h2>
                <p class="big">$1,420,792</p>
                <p>worldwide</p>
            </div>

            <div id="don2">
                <h2>Donate Money</h2>
                <p>Even a small donation can save lives!</p>
                <p><a href="./donate.html" class="button">Donate now</a></p>
            </div>

            <div id="don3">
                <h2>Become a Volunteer</h2>
                <p>We are in need of volunteers to distribute aid and help with rehabilitation.</p>
            </div>

            <div id="how-help">
                <p>How to help</p>
            </div>

            <div id="why1" class="why">
                <h2>Why donate?</h2>
                <p>It saves lives! As an added benefit, our 501(c)(3) tax-exempt organization lets you claim donations, reducing your taxible income!</p>
            </div>
            <div id="why2" class="why">
                <h2>Become A Volunteer</h2>
                <p>Even with food and shelter, we need able bodied volunteers to help with distributing resources and cleanup.</p>
            </div>
            <div id="why3" class="why">
                <h2>Sponsorship</h2>
                <p>You can sponsor a family or group of families till they're on their feet.</p>
            </div>

            <div id="blog">
                <p>Recent from the blog</p>
            </div>

            <div id="news1" class="why">
                <h2>Hurricane Irma has devastated Florida</h2>
                <p class="light">August 30, 2017</p>
                <p>A small river named Duden flows by their place and supplies it with the necessary regelialia.</p2>
            </div>
            <div id="news2" class="why">
                <h2>Hurricane Irma has devastated Florida</h2>
                <p class="light">August 30, 2017</p>
                <p>A small river named Duden flows by their place and supplies it with the necessary regelialia.</p2>
            </div>
            <div id="news3" class="why">
                <h2>Hurricane Irma has devastated Florida</h2>
                <p class="light">August 30, 2017</p>
                <p>A small river named Duden flows by their place and supplies it with the necessary regelialia.</p2>
            </div>

            <div id="about" class="why">
                <p>About us text</p>
                <p>Photo credit:<br />
                    <a href="https://flickr.com/photos/floridamemory/3659411397/">Storm surge</a><br />
                    <a href="https://flickr.com/photos/scguard/44918321411/">Flood</a>.</p>
            </div>

            <div id="sitelinks" class="why">
                <p>Site links</p>
                <ul>
                    <li><a href="./index.html">Home</a></li>
                    <li><a href="./donate.html">Donate</a></li>
                </ul>
            </div>

            <div id="contact" class="why">
                <p>203 Fake St. Mountain View, San Francisco, California, USA</p>
                <p>	+1 555 5555 555</p>
                <p>info@example.com</p>
            </div>


        </div>
    </body>
</html>