-
Notifications
You must be signed in to change notification settings - Fork 8
/
index.html
135 lines (128 loc) · 5.56 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
134
135
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Weather</title>
<!-- Fonts and Icons -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
<!-- CSS -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<!-- Search Box Section -->
<div class="search-box">
<!-- Icon for search box -->
<i class='bx bx-world'></i>
<!-- Input field for location -->
<input type="text" placeholder="Enter your location" id="location">
<!-- Search button -->
<button class='bx bx-search-alt'></button>
</div>
<!-- Weather Box Section -->
<div class="weather-box">
<div class="box">
<!-- Weather Information Section -->
<div class="info-weather">
<div class="weather">
<!-- Weather icon -->
<img src="images/cloud.png" alt="Weather Icon">
<!-- Temperature display -->
<p class="temperature">0<span>°C</span></p>
<!-- Weather description -->
<p class="description">Broken Clouds</p>
</div>
</div>
<!-- Weather Details Section -->
<div class="weather-details">
<!-- Humidity Information -->
<div class="humidity">
<!-- Humidity icon -->
<i class='bx bx-water'></i>
<div class="text">
<div class="info-humidity">
<!-- Humidity value -->
<span>0%</span>
</div>
<!-- Label for humidity -->
<p>Humidity</p>
</div>
</div>
<!-- Wind Speed Information -->
<div class="wind">
<!-- Wind speed icon -->
<i class='bx bx-wind'></i>
<div class="text">
<div class="info-wind">
<!-- Wind speed value -->
<span>0km/h</span>
</div>
<!-- Label for wind speed -->
<p>Wind Speed</p>
</div>
</div>
<!-- Additional Weather Details -->
<div class="additional-details">
<!-- Pressure Information -->
<div class="pressure">
<i class='bx bx-bar-chart-alt-2'></i>
<div class="text">
<div class="info-pressure">
<span>0 hPa</span>
</div>
<p>Pressure</p>
</div>
</div>
<!-- Visibility Information -->
<div class="visibility">
<i class='bx bx-show'></i>
<div class="text">
<div class="info-visibility">
<span>0 km</span>
</div>
<p>Visibility</p>
</div>
</div>
<!-- Sunrise Information -->
<div class="sunrise">
<i class='bx bx-sun'></i>
<div class="text">
<div class="info-sunrise">
<span>--:--</span>
</div>
<p>Sunrise</p>
</div>
</div>
<!-- Sunset Information -->
<div class="sunset">
<i class='bx bx-moon'></i>
<div class="text">
<div class="info-sunset">
<span>--:--</span>
</div>
<p>Sunset</p>
</div>
</div>
</div>
<!-- Additional Weather Details Ended -->
</div>
</div>
</div>
<!-- Weather Box section ended -->
</div>
<!-- Container div ended -->
<!-- Custom Popup -->
<div class="custom-popup" style="display: none;">
<div class="popup-content">
<p id="popup-message">Sample Message</p>
<button class="close-popup">OK</button>
</div>
</div>
<!-- JavaScript -->
<script src="index.js"></script>
</body>
</html>