-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
69 lines (66 loc) · 2.51 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Weather App</title>
<link rel="stylesheet" href="style.css">
<script defer src="script.js"></script>
</head>
<body>
<div class="container">
<nav class="navigation">
<section class="searchSection">
<input class="weatherInput" type="text" placeholder="Search location">
<svg class="search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>magnify</title><path d="M9.5,4C13.09,4 16,6.91 16,10.5C16,12.12 15.41,13.6 14.43,14.73L20.08,20.38L19.37,21.09L13.72,15.44C12.59,16.41 11.11,17 9.5,17C5.91,17 3,14.09 3,10.5C3,6.91 5.91,4 9.5,4M9.5,5C6.46,5 4,7.46 4,10.5C4,13.54 6.46,16 9.5,16C12.54,16 15,13.54 15,10.5C15,7.46 12.54,5 9.5,5Z" /></svg>
<p class="error"></p>
</section>
</nav>
<section class="temperatureButtons">
<button class="celcius active">°C</button>
<button class="fahrenheit">°F</button>
</section>
<div class="main">
<section class="locationSection">
<h1 class="location"></h1>
<h2 class="dateAndTime"></h2>
</section>
<section class="temperatureSection">
<img class="weatherIcon" alt="Weather icon which indicates the current weather">
<div class="temperature"></div>
<div class="minTemp"></div>
<div class="maxTemp"></div>
<div class="temperatureDescription"></div>
<div class="feelsLike"></div>
</section>
<section class="temperatureDetails">
<div class="humidity-details">
<p class="temperatureTitles">Humidity</p>
<div class="humidity"></div>
</div>
<div class="cloudiness-details">
<p class="temperatureTitles">Cloudiness</p>
<div class="cloudiness"></div>
</div>
<div class="wind-details">
<p class="temperatureTitles">Wind</p>
<div class="wind"></div>
</div>
<div class="rain-details">
<p class="temperatureTitles">Chance of rain</p>
<div class="chanceOfRain"></div>
</div>
<div class="sunrise-details">
<p class="temperatureTitles">Sunrise</p>
<div class="sunrise"></div>
</div>
<div class="sunset-details">
<p class="temperatureTitles">Sunset</p>
<div class="sunset"></div>
</div>
</section>
</div>
</div>
</body>
</html>