Pollution-Project/air.html at master · nyang3006/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
<html>
<style>
    .jumbotron{
        text-align: center;
        background-color:black;
        color:gray;
    }
    #body1{
      background-color: rgba(112, 140, 152, 0.8);
    }
</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="#">GoGreen</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>
            </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:820px;",>
      </div>

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

      <div class="item">
        <img src="https://undark.org/wp-content/uploads/sites/2/2018/02/pKPOL.jpg" alt="kids in smoke" style="height:820px;">
      </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>
<div id="describe">
    <div class="row">
    <br><div class="col-sm-12" style="background-color:white;">Air pollutions limited the fresh air we breath in which affects our health, it also can take our lives. Over milllions of people has died becasue of the toxic air we are consuming.</div>
  </div>
</div>


</div>

</body>
</html>