-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
123 lines (98 loc) · 5.53 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
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
<!-- Create a visualization dashboard website -->
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Weather Data Landing Page</title>
<!-- BELOW LINKS TO BOOTSTRAP css SITE -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!-- BELOW LINKS TO CSS SHEET -->
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<!-- The website must, at the top of every page, have a navigation menu that:
Has the name of the site on the left of the nav which allows users to return to the landing page from any page.
Contains a dropdown on the right of the navbar named "Plots" which provides links to each individual visualization page.
Provides two more links on the right: "Comparisons" which links to the comparisons page,
and "Data" which links to the data page.
Is responsive (using media queries). The nav must have similar behavior as
the screenshots "Navigation Menu" section (notice the background color change).
Be sure to use a CSS media query for the navigation menu. -->
<!-- nav bar from BOOTSTRAP -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a id="BigTitle" class="navbar-brand" href="#">  Lattitude  </a>
<!-- button shows up on a small screen -->
<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>
<!-- collapse when screen gets smaller...nav bar becomes menu icon -->
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<div class="ml-auto">
<ul class="navbar-nav">
<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="Visualization1.html">Max Temperature</a>
<a class="dropdown-item" href="Visualization2.html">Humidity</a>
<a class="dropdown-item" href="Visualization3.html">Cloudiness</a>
<a class="dropdown-item" href="Visualization4.html">Wind Speed</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="comparisons.html">Comparisons</a>
</li>
<li class="nav-item">
<a class="nav-link" href="Data.html">Data</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- A [landing page](#landing-page) containing: * An explanation of the project.
<!-- BOOTSTRAP'S COLUMN GRID SYSTEM -->
<div class="container">
<div class="row">
<div class="col-md-8">
<h2>Summary: Latitude vs. X</h2>
<p>The purpose of this project was to analyze how weather changes as you get closer to the equator.
We first pulled data from the OpenWeatherMap API, to assemble a dataset on over 500 cities.</p>
<a href="Visualization1.html">
<img src="Resources/assets/images/Fig1.png" alt="Temperature vs. Latitude" width="600" float: left></a>
<p>After assembling the dataset, we used Matplotlib to plot various aspects of the weather vs. latitude.
We considered temperature, cloudiness, wind speed, and humidity.
This site provides the source data and the visualizations created as part of the analyses,
as well as explanations and descriptions of any trends and correlations obeserved.
</p>
</div>
<!-- 4 graphs as a preview and link -->
<div class="col-md-4">
<h3>Visualizations</h3>
<div id="Previews">
<!-- id called in css file -->
<a href="Visualization1.html">
<img src="Resources/assets/images/Fig1.png" alt="Temperature vs. Latitude">
</a>
<a href="Visualization2.html">
<img src="Resources/assets/images/Fig2.png" alt="Humidity vs. Latitude">
</a>
<a href="Visualization3.html">
<img src="Resources/assets/images/Fig3.png" alt="Cloudiness vs. Latitude">
</a>
<a href="Visualization4.html">
<img src="Resources/assets/images/Fig4.png" alt="Wind Speed vs. Latitude">
</a>
</div>
</div>
</div>
</div>
<!-- large screen...small screen Be sure your website works at all window widths/sizes. -->
<!-- bootstrap's required javascript connection, with nav bar from bootstrap at top, and created the nav bar -->
<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.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>
<!-- Finally, the website must be deployed to GitHub pages.
When finished, submit to BootcampSpot the links to 1) the deployed app and 2) the GitHub repository. -->