Website-Design-Challenge/temp_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
<!DOCTYPE html>
<html lang="en">
<head>
<!--add page tag-->
  <title>Temp</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>

    <!--Temp Page info -->

    <div class="container">
        <div class="row">
            <div class="col-md-6">
                <div class="col-md-12">
                    <h3>Max Temperature</h3>
                    <hr>
                    <img src="Resources/Temperature Plot.png" width="100%" alt="temperature">
                    <br>
                    <p>As expected, the weather becomes significantaly warmer as one approaches the equator (Deg. Latitude). More interestingly, however, is the fact that the southern hemisphere tends to be warmer this time of the year than the northern hemisphere. This may be due to the tilt of the earth at the time of the year this data was gathered.</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-6">
                            <a href="temp_plot.html"><img src="Resources/Temperature Plot.png" width="100%" alt="temprature"></a>
                        </div>

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

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

                        <div class="col-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>