-
Notifications
You must be signed in to change notification settings - Fork 0
/
temp.html
118 lines (106 loc) · 5.83 KB
/
temp.html
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
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Temperature Dashboard</title>
<!-- To ensure proper rendering and touch zooming -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bring in Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<!-- Bring in my stylesheet -->
<link rel="stylesheet" type="text/css" medida="screen" href="styles.css">
</head>
<body>
<div class="navigation">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="index.html" style="background-color: #590d8b;">Home</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown"
aria-expanded="false" aria-controls="navbarDropDown" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav ml-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Plots
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="temp.html">Max Temperature</a>
<a class="dropdown-item" href="humidity.html">Humidity</a>
<a class="dropdown-item" href="clouds.html">Cloudiness</a>
<a class="dropdown-item" href="wind.html">Wind Speed</a>
</div>
</li>
<li class="nav-item active">
<a class="nav-link" href="comparison.html">Comparison</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="data.html">Data</a>
</li>
</ul>
</div>
</nav>
</div>
<div class="container">
<div class="row">
<div class="col-lg-7 col-md-12">
<div class="box">
<h1 class="title">Temperature</h1>
<hr class="light">
<img alt="Humidity Graph" src="assets/images/temp.png">
<p>According to the webiste World Altas, temperature is signifcantly impacted by latitude. </p>
<p>"Latitude is one of the primary factors that affect temperature. As one moves further away from the equator, the
temperature falls because regions receive less sunlight. The reason behind this is the shape of the earth".
This holds true for the data in the above plot.</p>
<h2>Learn more about the impact of latitude on temperature at the link below:</h2>
<a href="https://www.worldatlas.com/articles/what-is-the-effect-of-latitude-on-temperature.html"><img src="myimages/temp_lat.png"></a>
</div>
</div>
<div class="col-lg-5 col-md-12">
<div class="box">
<h3 class="title">Visualizations</h3>
<hr class="light">
<div class="container">
<div class="row" style="padding-bottom: 30px;">
<div class="col-6">
<a href="temp.html"><img alt="Max Temperature Graph" src="assets/images/temp.png"
class="image-active"></a>
</div>
<div class="col-6">
<a href="humidity.html"><img alt="Humidity Graph" src="assets/images/humidity.png"
class="image-fluid"></a>
</div>
</div>
<div class="row">
<div class="col-6">
<a href="clouds.html"><img alt="Cloudiness Graph" src="assets/images/clouds.png"
class="image-fluid"></a>
</div>
<div class="col-6">
<a href="wind.html"><img alt="Wind Speed Graph" src="assets/images/windspeed.png"
class="image-fluid"></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<footer>
<div class="footer">UTSA Data Analytics by Mychele Larson</div>
<a href="https://github.com/mychele-larson/Web-Design-Challenge.git">@github</a>
</footer>
<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>
</body>
</html>