-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
133 lines (127 loc) · 6.65 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
124
125
126
127
128
129
130
131
132
133
s<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="https://fonts.googleapis.com/css2?family=Spartan:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="css/main.css" />
<title>Weather.App</title>
</head>
<body>
<div class="display-area">
<img src="images/backgrounds/clear-day.jpg" class="current-display__background current-display__color" alt="" />
<div class="input-area">
<form class="input-area__form" autocomplete="off" onsubmit="return false;">
<input type="text" class="input-area__city" placeholder="City" required />
<input type="text" class="input-area__state" placeholder="State" required />
<button type="submit" value="Reset" class="input-area__button" onclick="getWeather();">Check Weather</button>
</form>
</div>
<div class="current-display">
<div class="current-display__date current-display__color"></div>
<div class="current-display__location current-display__color"></div>
<div class="current-display__desc current-display__color"></div>
<div class="current-display__temp current-display__color">
<span class="current-display__temp--main"></span><span class="current-display__temp--feels current-display__color"></span>
</div>
<div class="current-display__icon">
<img src="images/animated/day.svg" class="current-display__icon--img" alt="icon" />
</div>
<div class="current-display__hum current-display__color"></div>
<div class="current-display__wind current-display__color">
<span class="current-display__wind--speed"></span>
<span class="current-display__wind--dir"></span>
</div>
</div>
<div class="forecast">
<div class="row forecast__display">
<div class="forecast__card forecast__card--day-1">
<div class="forecast__card--background">
<img src="images/backgrounds/clear-day.jpg" class="forecast__card--background__img day-1-bg" alt="" />
</div>
<div class="forecast__card--date date-1"></div>
<div class="forecast__card--icon">
<img src="images/animated/day.svg" class="forecast__card--icon__img day-1-icon" alt="" />
</div>
<div class="forecast__card--desc desc-1"></div>
<div class="forecast__card--hi hi-day-1"></div>
<div class="forecast__card--low low-day-1"></div>
</div>
<div class="forecast__card forecast__card--day-2">
<div class="forecast__card--background">
<img src="images/backgrounds/clear-day.jpg" class="forecast__card--background__img day-2-bg" alt="" />
</div>
<div class="forecast__card--date date-2"></div>
<div class="forecast__card--icon">
<img src="images/animated/day.svg" class="forecast__card--icon__img day-2-icon" alt="" />
</div>
<div class="forecast__card--desc desc-2"></div>
<div class="forecast__card--hi hi-day-2"></div>
<div class="forecast__card--low low-day-2"></div>
</div>
<div class="forecast__card forecast__card--day-3">
<div class="forecast__card--background">
<img src="images/backgrounds/clear-day.jpg" class="forecast__card--background__img day-3-bg" alt="" />
</div>
<div class="forecast__card--date date-3"></div>
<div class="forecast__card--icon">
<img src="images/animated/day.svg" class="forecast__card--icon__img day-3-icon" alt="" />
</div>
<div class="forecast__card--desc desc-3"></div>
<div class="forecast__card--hi hi-day-3"></div>
<div class="forecast__card--low low-day-3"></div>
</div>
<div class="forecast__card forecast__card--day-4">
<div class="forecast__card--background">
<img src="images/backgrounds/clear-day.jpg" class="forecast__card--background__img day-4-bg" alt="" />
</div>
<div class="forecast__card--date date-4"></div>
<div class="forecast__card--icon">
<img src="images/animated/day.svg" class="forecast__card--icon__img day-4-icon" alt="" />
</div>
<div class="forecast__card--desc desc-4"></div>
<div class="forecast__card--hi hi-day-4"></div>
<div class="forecast__card--low low-day-4"></div>
</div>
<div class="forecast__card forecast__card--day-5">
<div class="forecast__card--background">
<img src="images/backgrounds/clear-day.jpg" class="forecast__card--background__img day-5-bg" alt="" />
</div>
<div class="forecast__card--date date-5"></div>
<div class="forecast__card--icon">
<img src="images/animated/day.svg" class="forecast__card--icon__img day-5-icon" alt="" />
</div>
<div class="forecast__card--desc desc-5"></div>
<div class="forecast__card--hi hi-day-5"></div>
<div class="forecast__card--low low-day-5"></div>
</div>
<div class="forecast__card forecast__card--day-6">
<div class="forecast__card--background">
<img src="images/backgrounds/clear-day.jpg" class="forecast__card--background__img day-6-bg" alt="" />
</div>
<div class="forecast__card--date date-6"></div>
<div class="forecast__card--icon">
<img src="images/animated/day.svg" class="forecast__card--icon__img day-6-icon" alt="" />
</div>
<div class="forecast__card--desc desc-6"></div>
<div class="forecast__card--hi hi-day-6"></div>
<div class="forecast__card--low low-day-6"></div>
</div>
<div class="forecast__card forecast__card--day-7">
<div class="forecast__card--background">
<img src="images/backgrounds/clear-day.jpg" class="forecast__card--background__img day-7-bg" alt="" />
</div>
<div class="forecast__card--date date-7"></div>
<div class="forecast__card--icon">
<img src="images/animated/day.svg" class="forecast__card--icon__img day-7-icon" alt="" />
</div>
<div class="forecast__card--desc desc-7"></div>
<div class="forecast__card--hi hi-day-7"></div>
<div class="forecast__card--low low-day-7"></div>
</div>
</div>
</div>
</div>
<script src="app.js"></script>
</body>
</html>