-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
101 lines (100 loc) · 6.08 KB
/
index.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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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">
<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>
<link rel="stylesheet" type="text/css" href="main.css">
<title>Landing Page</title>
</head>
<body>
<div class="navigation">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" style="background-color: rgb(255,255,255);" href="index.html">LATITUDE</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" 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" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
PLOTS
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="Resources/temperature.html">Max Temperature</a>
<a class="dropdown-item" href="Resources/humidity.html">Humidity</a>
<a class="dropdown-item" href="Resources/cloudiness.html">Cloudiness</a>
<a class="dropdown-item" href="Resources/wind.html">Wind Speed</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="Resources/comparison.html">COMPARISON</a>
</li>
<li class="nav-item">
<a class="nav-link" href="Resources/data.html">DATA</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://github.com/tstenner1/Web-Design-Challenge">REPO</a>
</li>
</ul>
</div>
</nav>
</div>
<div class="container">
<div class="row">
<div class="col-lg-7 col-md-12">
<div class="box" style="padding-bottom: 25px;">
<h3 class="title">Homework Explanation <br> (LATITUDE VS. X)</h3>
<hr>
<br>
<p> This projects objective is to analyze how weather across over 500 cities across the world
changes relative to the distance from the equator. OpenWeatherMap API was used to create the dataset to mold a representative model of weather across world cities.
Matplotlib was utilized to show visualizations of these weather relationships: weather vs. latitude. Relationships analyzed included: Temperature (F) vs. Latitude, Humidity (%) vs. Latitude,
Cloudiness (%) vs. Latitude, and Wind Speed (mph) vs. Latitude. Data and visualizations are are provided as part of the analysis.
</p>
<br>
</div>
</div>
<div class="col-lg-5 col-md-12">
<div class="box">
<h3 class="title">VISUALIZATIONS</h3>
<hr>
<div class="container">
<div class="row" style="padding-bottom: 60px;">
<div class="col-6">
<div class="title">Latitude vs. Max Temperature</div>
<a href="../Resources/temperature.html">
<img class="panel" src="Resources/assets/images/Fig1.png" alt="Max Temperature Graph">
</a>
</div>
<div class="col-6">
<div class="title">Latitude vs. Humidity</div>
<a href="../Resources/humidity.html">
<img class="panel" src="Resources/assets/images/Fig2.png" alt="Humidity Graph">
</a>
</div>
</div>
<div class="row" style="padding-bottom: 70px;">
<div class="col-6">
<div class="title">Latitude vs. Cloudiness</div>
<a href="../Resources/cloudiness.html">
<img class="panel" src="Resources/assets/images/Fig3.png" alt="Cloudiness Graph">
</a>
</div>
<div class="col-6">
<div class="title">Latitude vs. Wind Speed</div>
<a href="../Resources/wind.html">
<img class="panel" src="Resources/assets/images/Fig4.png" alt="Wind Speed Graph">
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>