Pollution-Project/forest.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
121
122
<html>
<style>
    .jumbotron{
        text-align: center;
        background-color:black;
        color:black;
        background-image: url(https://media.treehugger.com/assets/images/2016/07/green-forest-trees.jpg.860x0_q70_crop-scale.jpg);

    }
    #body1{
        background-image: url(https://amazingpict.com/wp-content/uploads/2015/03/deforestation-.jpg);
        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;

    }
    img{
      width:100%;
    }
    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>Deforestation</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 class="active"><a href="forest.html">Deforestation</a></li>
                <li><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="https://cdn4.techly.com.au/wp-content/uploads/2017/05/deforestation-and-koala-799x423.jpg" alt="lost Koala" style="height:739px;",>
      </div>

      <div class="item">
        <img src="http://www.nationalgeographic.it/images/2012/04/26/152302578-759faeeb-6ea4-4bee-9334-1aa481f445bb.jpg" alt="dead koala" style="height:739px;">
      </div>

      <div class="item">
        <img src="https://underscience.com/wp-content/uploads/2015/10/Creative_Wallpaper_Deforestation_patients_lungs_025769_-1.jpg" alt="lungs" 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>Forests cover 31% of the land area on our planet and they produce oxygen and provide homes for people and wildlife. Many of the world’s most threatened and endangered animals live in forests, and 1.6 billion people rely on benefits forests offer, which are food, fresh water, clothing, traditional medicine and shelter. But forests around the world are under threat from deforestation, for examples fires, clear-cutting for agriculture, ranching and development, unsustainable logging for timber, and degradation due to climate change are form of deforestation. The lost of trees have major impacts on people’s livelihoods and threatens a wide range of plant and animal species. We need to work together to protect the forests and cutting down less trees.</div>
  </div>
</div>


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