Website-Design-Challenge/wind_plot.html at master · jassefa/Website-Design-Challenge · 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
<!DOCTYPE html>
<html lang="en">
<head>
<!--add page tag-->
  <title>Wind</title>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
  integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <link href="style.css" rel="stylesheet">

</head>

<body>
    <!--Navigation Bar -->
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <div class="container">
            <a class="navbar-brand d-inline p-2 ml-5 bg-info text-white mb-0 pb-0" href="./index.html">Latitude</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="nav navbar-nav ml-auto">
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="plots.html" id="navbarDropdown" role="button" data-toggle="dropdown"
                     aria-haspopup="true" aria-expanded="false">
                     Plot
                        </a>
                        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
                            <a class="dropdown-item" href="temp_plot.html">Temperature Plot</a>
                            <a class="dropdown-item" href="humdity_plot.html">Humidity Plot</a>
                            <a class="dropdown-item" href="cloud_plot.html">Cloudiness Plot</a>
                            <a class="dropdown-item" href="wind_plot.html">Windspeed Plot</a>
                        </div>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="comparison.html">Comparison</a>
                    </li>
                    <li class="nav item">
                    <a class="nav-link" href="cities_table.html">Data</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

<!--wind speed page info-->

    <div class="container">
        <div class="row">
            <div class="col-md-6">
                <div class="col-md-12">
                    <h3>Wind Speed</h3>
                    <hr>
                    <img src="Resources/Windspeed Plot.png" width="100%" alt="wind speed">
                    <br>
                    <p> When comparing windspeed to Latitude, it is easy to observe increases in wind speed with higher Latitude.
                        While the increase is not dramatic, there are many scientific and logical reasons that explain this relatioship.
                    </p>
                </div>
            </div>

            <!--Visualization Page container-->

            <div class="col-md-6">
                <div class="col-md-12">
                    <h3>Visualizations</h3>
                    <hr>
                    <div class="row">
                        <div class="col-md-6">
                            <a href="temp_plot.html"><img src="Resources/Temperature Plot.png" width="100%" alt="temprature"></a>
                        </div>

                        <div class="col-md-6">
                            <a href="humdity_plot.html"><img src="Resources/Humidity Plot.png" width="100%" alt="humidity"></a>
                        </div>

                        <div class="col-md-6">
                            <a href="cloud_plot.html"><img class="pic" src="Resources/Cloudiness Plot.png" width="100%" alt="cloudiness"></a>
                        </div>

                        <div class="col-md-6">
                            <a href="wind_plot.html"><img src="Resources/Windspeed Plot.png" width="100%" alt="windspeed"></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Footer -->
    <footer class="page-footer font-small footer-dark">
        <div class="footer-copyright text-center py-3">© Copyright Coding Bootcamp 2019
        </div>
    </footer>
</body>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

</html>