-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathclouds.html
120 lines (107 loc) · 5.85 KB
/
clouds.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
119
120
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Clouds 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">Cloudiness</h1>
<hr class="light">
<img alt="Cloudiness Graph" src="assets/images/clouds.png">
<p>Comparing the relationship between latitude and cloudiness, there is some correlation between these two elements. According to the
Windows To The Universe website, "At and near the poles, the air is cooler and sinks, so the troposphere is thinner above this part of the planet. Because
of this, high clouds in the tropics have a higher base and a higher top than high clouds in the mid-latitudes or high
clouds in the tropics."
<h2>Learn more by following the link below:</h2>
<a href="https://www.windows2universe.org/earth/Atmosphere/clouds/heights_latitude.html#:~:text=At%20and%20near%20the%20poles,high%20clouds%20in%20the%20tropics."><img src="myimages/clouds_lat.png"></a>
</p>
</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-fluid"></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-active"></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>
</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>