Skip to content

Commit 03cafb7

Browse files
VipulNerdVipulNerd
committed
commit
1 parent 6c32242 commit 03cafb7

File tree

2 files changed

+144
-0
lines changed

2 files changed

+144
-0
lines changed

‎Weather/index.html

+59
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Weather Forecast</title>
8+
<link rel="stylesheet" href="style.css">
9+
</head>
10+
11+
<body>
12+
<div class="weather-widget">
13+
<h1>Weather Forecast</h1>
14+
<div class="weather-location">
15+
<h2>New York City</h2>
16+
<p>Monday, 7 October 2024</p>
17+
</div>
18+
<div class="weather-details">
19+
<h3>25°C</h3>
20+
<p>Sunny</p>
21+
<p>Humidity: 55%</p>
22+
<p>Wind: 12 km/h</p>
23+
</div>
24+
</div>
25+
26+
<!-- Weekly forecast -->
27+
<div class="weekly-forecast">
28+
<h2>Weekly Forecast</h2>
29+
<div class="forecast-row">
30+
<div class="day-forecast">
31+
<p>Mon</p>
32+
<h3>26°C</h3>
33+
<p>Sunny</p>
34+
</div>
35+
<div class="day-forecast">
36+
<p>Tue</p>
37+
<h3>22°C</h3>
38+
<p>Cloudy</p>
39+
</div>
40+
<div class="day-forecast">
41+
<p>Wed</p>
42+
<h3>19°C</h3>
43+
<p>Rainy</p>
44+
</div>
45+
<div class="day-forecast">
46+
<p>Thu</p>
47+
<h3>24°C</h3>
48+
<p>Partly Cloudy</p>
49+
</div>
50+
<div class="day-forecast">
51+
<p>Fri</p>
52+
<h3>28°C</h3>
53+
<p>Sunny</p>
54+
</div>
55+
</div>
56+
</div>
57+
</body>
58+
59+
</html>

‎Weather/style.css

+85
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
* {
2+
box-sizing: border-box;
3+
margin: 0;
4+
padding: 0;
5+
font-family: 'Arial', sans-serif;
6+
}
7+
8+
body {
9+
display: flex;
10+
justify-content: center;
11+
align-items: center;
12+
flex-direction: column;
13+
background-color: #fff;
14+
padding: 20px;
15+
height: 100vh;
16+
}
17+
18+
.weather-widget {
19+
background-color: #007BFF;
20+
border-radius: 10px;
21+
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
22+
padding: 20px;
23+
text-align: center;
24+
max-width: 300px;
25+
width: 100%;
26+
margin-bottom: 40px;
27+
}
28+
29+
h1 {
30+
font-size: 24px;
31+
color: #333;
32+
}
33+
34+
.weather-location {
35+
margin-bottom: 20px;
36+
}
37+
38+
h2 {
39+
font-size: 20px;
40+
color: black;
41+
}
42+
43+
.weather-details h3 {
44+
font-size: 48px;
45+
color: white;
46+
}
47+
48+
.weather-details p {
49+
font-size: 16px;
50+
color: white;
51+
margin-top: 10px;
52+
}
53+
54+
.weekly-forecast {
55+
background-color: #fff;
56+
border-radius: 10px;
57+
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
58+
padding: 20px;
59+
text-align: center;
60+
max-width: 600px;
61+
width: 100%;
62+
}
63+
64+
.forecast-row {
65+
display: flex;
66+
justify-content: space-between;
67+
}
68+
69+
.day-forecast {
70+
background-color: #007BFF;
71+
padding: 15px;
72+
border-radius: 5px;
73+
text-align: center;
74+
width: 100px;
75+
}
76+
77+
.day-forecast h3 {
78+
font-size: 24px;
79+
margin-bottom: 5px;
80+
}
81+
82+
.day-forecast p {
83+
font-size: 14px;
84+
color: whitesmoke;
85+
}

0 commit comments

Comments
 (0)