-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
54 lines (49 loc) · 2.97 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Weather</title>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<div class="container">
<div class="header">
<div class="search-box">
<input type="text" placeholder="Enter your location" class="input-box">
<button class="fa-solid fa-magnifying-glass" id="search-btn"></button>
</div>
<div class="location-not-found">
<h1>Sorry, Location not found!</h1>
<img src="./error.jpg" alt="404 Error">
</div>
</div>
<div class="weather-body">
<img class="weather-img" src="https://th.bing.com/th/id/OIP.YKvFSocKFQaoo-56XlWNMwHaHa?rs=1&pid=ImgDetMain" alt="">
<div class="weather-box">
<p class="temperature">0 <sup>°C</sup></p>
<P class="description">Light Rain</P>
</div>
<div class="weather-details">
<div class="humidity">
<i><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#5f6368"><path d="M480-100q-133 0-226.5-92T160-416q0-63 24.5-120.5T254-638l226-222 226 222q45 44 69.5 101.5T800-416q0 132-93.5 224T480-100Z"/></svg></i>
<div class="text">
<span id="humidity">0%</span>
<p>Humidity</p>
</div>
</div>
<div class="wind">
<i><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#5f6368"><path d="M400-40q0-33 23.5-56.5T480-120v-208q-12-5-22.5-11.5T438-354l-88 56q-14 8-30.5 10.5T286-290l-180-51q-29-8-47.5-32.5T40-429q0-38 26.5-64.5T131-520h301q10-11 22-19t26-13v-137q0-17 6.5-32t18.5-26l137-128q23-22 53.5-25t56.5 13q32 20 41.5 56.5T783-762L624-499q7 12 10.5 26t4.5 29l108 26q16 4 29 14t21 24l91 164q15 27 11 57t-26 52q-27 27-64.5 27T744-107L560-291v171q33 0 56.5 23.5T640-40H400ZM160-760v-80h240v80H160Zm400 71v137q1 0 1.5.5t1.5.5l152-253q2-4 1-8.5t-5-6.5q-3-2-7.5-1t-6.5 3L560-689ZM40-600v-80h200v80H40Zm480 200q17 0 28.5-11.5T560-440q0-17-11.5-28.5T520-480q-17 0-28.5 11.5T480-440q0 17 11.5 28.5T520-400Zm-211 34 93-56q-1-5-1-9v-9H131q-5 0-8 3t-3 8q0 4 2 7t6 4l181 52Zm419 25-114-26q-2 2-4 5t-4 5l195 194q3 3 8 3t8-3q3-3 3.5-6.5T819-177l-91-164ZM120-120v-80h200v80H120Zm400-320Zm43-111ZM401-440Zm205 83Z"/></svg></i>
<div class="text">
<span id="wind-speed">0Km/H</span>
<p>Wind Speed</p>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="https://kit.fontawesome.com/2b2e099db3.js" crossorigin="anonymous"></script>
<script src="./script.js"></script>
</body>
</html>