Pollution-Project/air.html at master · jchoi8163/Pollution-Project · 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
<html>
<style>
    .jumbotron{
        text-align: center;
        background-color:black;
        color:black;
        background-image: url(https://cdn.pixabay.com/photo/2015/03/26/09/47/sky-690293_960_720.jpg);
        background-repeat: no-repeat;
        background-size: cover;

    }
    #body1{
      background-image: url(https://d2v9y0dukr6mq2.cloudfront.net/video/thumbnail/EPzzjHhuxijr01n5f/chimneys-power-plant-with-huge-toxic-smoke-air-pollution-concept-4k-ultra-hd-3840x2160-video-clip_bxumxqnwx_thumbnail-full01.png);
      background-attachment: fixed;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }
     #describe{
      font-size: 15pt;
      text-align: center;
      max-width: 700px;
      margin: auto;
      padding: 5px 20px 25px 20px;
      background-color: rgba(0,0,0,0.5);
      color: white;

    }
    #myCarousel{
      height: 739px;
    }
    footer{
      color: white;
    }
</style>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.3.0/mustache.min.js"></script>

</script>
<body id="body1">
    <!--Jumbotron Header-->
    <div class="container">
        <div class="jumbotron">
            <h1>Air Pollution</h1>
            <p> </p>
        </div>
    </div>

    <!--NavTab-->
    <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container-fluid">
            <div class="navbar-header">
            <a class="navbar-brand" href="#">SAVE THE WORLD ♲</a>
            </div>
                <ul class="nav navbar-nav">
                <li><a href="index.html">Home</a></li>
                <li><a href="water.html">Water Pollution</a></li>
                <li><a href="forest.html">Deforestation</a></li>
                <li class="active"><a href="air.html">Air Pollution</a></li>
                <li><a href="quiz.html">Quiz</a></li>
                <li><a href="about.html">About</a></li>
            </ul>
        </div>
    </nav>


<!--carousel-->
<div class="container">
  <div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner">
      <div class="item active">
        <img src="http://i.dailymail.co.uk/i/pix/2017/02/01/11/3CB8E43F00000578-4179362-Toxic_fumes_from_cars_and_power_plants_are_infiltrating_brain_ce-a-1_1485946891475.jpg" alt="Smoke" style="height:739px;",>
      </div>

      <div class="item">
        <img src="https://www.niehs.nih.gov/health/assets/images/air_pollution_og.jpg" alt="Smoke" style="height:739px;">
      </div>

      <div class="item">
        <img src="https://undark.org/wp-content/uploads/sites/2/2018/02/pKPOL.jpg" alt="kids in smoke" style="height:739px;">
      </div>
    </div>

    <!-- Left and right controls -->
    <a class="left carousel-control" href="#myCarousel" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</div>
<hr>
<div id="describe">
    <div class="row">
    <br><div class="col-sm-12"> Cars, planes, power plants, and other human activities that involve the burning of fossil fuels such as gasoline and natural gas are the leading cause of pollutant. The toxic air can harm a baby's lung and respiratory system which could lead to having lower IQs. IThere are different kinds of pollution which some is visible, some is invisible that contribute to global warming. In order to stop pollution to spread more we neeed to work on reducing the levels of sulfur dioxide, smog, and smoke in order to improve people's health.</div>
  </div>
</div>


</div>
<br>
<footer><center>© 2018 SAVETHEWORLD ♲. All rights reserved.</center></footer>
</body>
</html>