-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
121 lines (114 loc) · 3.4 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
<!DOCTYPE html>
<html>
<head>
<style>
.map {
width: 1000px;
height: 800px;
margin: auto;
}
h1 {
text-align: center;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="/map.js"></script>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.5/css/weather-icons.min.css">
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.5/css/weather-icons-wind.min.css">
<link rel ="stylesheet" href = "styles.css">
</head>
<body>
<h1>Holy Crap Wellington, There's Music!</h1>
<div id="map" class="map"></div>
<div class="wrapper">
<div class="main">
<div class="lead">
<h2 class="prefix"> Weather in </h2>
<h1>
<span class="location"></span>
</h1>
<h2 class="suffix"> at
<span class="time"></span> on
<span class="date"></span>
</h2>
</div>
<div class="content">
<ul class="list">
<li class="content-main">
<p class="subheading"> Temperature</p>
<h1 class="li">
<i class="wi wi-temperature" id="temperature"></i>
<span class="temp"></span>
</h1>
</li>
<li class="content-main">
<p class="subheading">Wind</p>
<h1 class="li">
<i class="wi" id="windIcon"></i>
<span class="wind"></span>
</h1>
</li>
<li class="content-main">
<p class="subheading"> Humidity</p>
<h1 class="li">
<i class="wi wi-humidity"></i>
<span class ="humidity"></span>
</h1>
</li>
<li class="content-main">
<p class="subheading"> Pressure </p>
<h1 class="li">
<i class="wi wi-barometer"></i>
<span class="pressure"></span>
</h1>
</li>
<li class="content-main">
<p class="subheading">Maximum Temperature</p>
<h1 class="li">
<i class="wi wi-thermometer"></i>
<span class="tempMax"></span>
</h1>
</li>
<li class="content-main">
<p class="subheading">Sunrise</p>
<h1 class="dateTime"><i class="wi wi-sunrise"></i>
<span class="sunrise"></span>
</h1>
</li>
<li class="content-main">
<p class="subheading">Sunset</p>
<h1 class="dateTime">
<i class="wi wi-sunset"></i>
<span class="sunset"></span>
</h1>
</li>
<li class="content-main">
<p class="subheading"> Minimum Temperature</p>
<h1 class="li">
<i class="wi wi-thermometer-exterior"></i>
<span class="tempMin"></span>
<span class="tempImpMin hide"></span>
</h1>
</li>
</ul>
</div>
</div>
<div class='wrapper'>
<div class='grid'>
<span class ="img img-0"> </span>
<span class="img img-1"></span>
<span class="img img-2"></span>
<span class="img img-3" ></span>
<span class="img img-4"></span>
<span class="img img-5"></span>
<span class="img img-6" ></span>
<span class="img img-7"></span>
<span class="img img-8"></span>
<span class="img img-9" ></span>
</div>
</div>
</div>
<script src = "https://code.jquery.com/jquery-2.1.4.min.js"> </script>
<script src = "weather.js"> </script>
</body>
</html>