Hope-Hackathon/index.html at main · darp-cs/Hope-Hackathon · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Placeholder to link global file -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
    <!-- <link rel="stylesheet" href="/css/index.css"> -->
    <link rel="stylesheet" type="text/css" href="/css/home_page.css">
    <!-- <link rel="stylesheet" type="text/css" href="/css/index.css"> -->

    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <title>Go Green, Keep the Air Clean </title>
</head>
<body>
    <header>
        <div class="container">

            <nav class="navbar">
                <div class="hamburger--container">
                    <div class="line line--1"></div>
                    <div class="line line--2"></div>
                    <div class="line line--3"></div>
                </div>
                <ul class="ul--navlist">
                    <li><a onclick="location.href='/' ">Home</a></li>
                    <li><a onclick="location.href='/pollution'">Pollution</a></li>
                    <li><a onclick="location.href='/help' ">How to help</a></li>
                    <li><a onclick="location.href='/contact' ">Get Involved</a></li>
                </ul>
            </nav>
        </div>

        <section class="mobile_header">
            <h1 class="mobile_text">Keep Air Clean</h1>
        </section>

        <section class="slide_container">
            <div class="slide">
                <h1>Keep Air Clean</h1>
                <img src="/images/sky_1.jpg" alt="cloud picture 1">
            </div>

            <div class="slide">
                <h1>Keep Air Clean</h1>
                <img src="/images/sky_2.jpg" alt="cloud picture 2">
            </div>

            <div class="slide">
                <h1>Keep Air Clean</h1>
                <img src="/images/sky_3.jpg" alt="cloud picture 3">
            <div>
        </section>
    </header>

    <main>
        <section class="mission">
            <h2>Our Mission</h2>
            <p> At Keep Air Clean, we are committed to a sustainable environmental future by informing individuals of the harmful impacts that poor air quality can have on them and their loved ones. Yes, that means your furry friends too. Additionally, we provide resources and support that empower you to make the change in your community.
           </p>
        </section>

        <section class="content1">
            <div class="intro_problem">
                <h2>Well... Does air pollution <i>really</i> affect me?</h2>
                <p>Let's take a look at what the World Health Organization has to say. </p>

                <iframe width="560" height="315" src="https://www.youtube.com/embed/n3DM5scRpns" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" title="World Health Organization clean air informative video" allowfullscreen></iframe>
            </div>

            <div class="health">
                <h2>Your Health</h2>
                <p>Our physical and psychological well-being is affected differently by the kind of air pollution we are exposed to. Even if you are healthy, you can still experience the impacts of air pollution such as respiratory irritation or breathing difficulties during exercise or outdoor activities. Your risk depends on your current health, the pollutant type and concentration, and the length of your exposure to the polluted air. There are many organs and bodily functions that can be harmed, the consequences including:</p>

                <ul class="health_list">
                    <li>
                        Respitory Disease
                    </li>
                    <li>Cardiovascular damage</li>
                    <li>Fatigue, headaches, and anxiety</li>
                    <li>Irritation of the eyes, nose, and throat</li>
                    <li>
                        Damage to reproductive organs
                    </li>
                    <li>Harm to the liver, spleen, and blood</li>
                    <li>Nervous system damage</li>
                </ul>

                <a href="https://saaccionasostenibilidad.blob.core.windows.net/media/560206/effects-air-pollution-health.jpg" target="_blank" rel="noopener" aria-label="Link to health image">
                <img src="../images/effects-air-pollution-health.jpg" alt="Effects polluted air has on your body"></a>


            </div>
        </section>

        <section class="enviro_problems">
            <h2>Enviromental Impacts</h2>
            <p>
                 Air pollutants cause less-direct health effects when they contribute to climate change. Heat waves, extreme weather, food supply disruptions, and other effects related to increased greenhouse gases can have negative impacts on human health. The U.S. Fourth National Climate Assessment released in 2018 noted, for example, that a changing climate "could expose more people in North America to ticks that carry Lyme disease and mosquitoes that transmit viruses such as West Nile, chikungunya, dengue, and Zika."
            </p>

            <p>Check out our pollution page to discover the air quality in your area</p>

            <div class="button_container">
                <a  onclick="location.href='/pollution' "  class="button_home">Pollution</a>
            </div>
        </section>
    </main>

    <footer class="footer">
        <div class="social">
            <a href="https://www.instagram.com/?hl=en" target="_blank" rel="noopener" aria-label="Link to our Instagram page!"><i class="fa fa-instagram"></i></a>

            <a href="/index.html"><img id="logo" src="/images/wind_logo.png" alt="wind logo" width="47" height="45"></a>


            <a href="https://www.facebook.com/" target="_blank" rel="noopener" aria-label="Link to our Facebook page!"><i class="fa fa-facebook-square"></i></a>
        </div>
        <div class="copyright">© Keep Air Clean</div>
    </footer>

    <script src="js/home.js"></script>
    <script src="js/navbar.js"></script>

</body>
</html>