Skip to content

Commit ed12aa5

Browse files
Vatsal2054Vatsal2054
authored
Merge pull request #15 from git112/my-new-branch
Added Forecast Cards
2 parents 3a48475 + e7c76c4 commit ed12aa5

File tree

2 files changed

+193
-9
lines changed

2 files changed

+193
-9
lines changed

‎css/style.css‎

Lines changed: 144 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
2+
13
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');
24

35
body {
@@ -12,7 +14,7 @@ body {
1214
}
1315

1416
.container {
15-
max-width: 800px;
17+
max-width: 1200px;
1618
width: 90%;
1719
padding: 30px;
1820
background-color: rgba(255, 255, 255, 0.9);
@@ -211,12 +213,6 @@ footer {
211213
margin: 5px 0 0;
212214
}
213215

214-
.forecast-container {
215-
display: flex;
216-
justify-content: space-between;
217-
flex-wrap: wrap;
218-
}
219-
220216
.forecast-day {
221217
text-align: center;
222218
padding: 10px;
@@ -249,6 +245,103 @@ footer {
249245
margin-right: 10px;
250246
}
251247

248+
.forecast-card.sunny .icon {
249+
color: #ffdf7e;
250+
}
251+
252+
.forecast-card.rainy .icon {
253+
color: #42A5F5;
254+
}
255+
256+
.forecast-card.cloudy .icon {
257+
color: #78909C;
258+
}
259+
260+
.forecast-card.snowy .icon {
261+
color: #00ACC1;
262+
}
263+
264+
footer {
265+
text-align: center;
266+
color: #555;
267+
font-size: 2em;
268+
margin-top: 40px;
269+
}
270+
.forecast-container {
271+
display: flex;
272+
flex-wrap: wrap;
273+
gap: 30px;
274+
margin: 0 auto;
275+
276+
}
277+
278+
.forecast-card {
279+
flex: 1 1 1 calc(33.333% - 20px);
280+
281+
margin-bottom: 20px;
282+
background: #F4F9F9;
283+
padding: 20px;
284+
border-radius: 55px;
285+
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
286+
text-align: left;
287+
transition: transform 0.3s, background-color 0.3s, box-shadow 0.3s, border 0.3s;
288+
position: relative;
289+
border: 3px solid transparent;
290+
291+
}
292+
293+
.forecasts-row {
294+
display: flex;
295+
flex-wrap: wrap;
296+
gap: 30px;
297+
margin: 0 auto;
298+
}
299+
300+
301+
.forecast-card:hover {
302+
background-color: #ddfaff46;
303+
border-color: #00ACC1;
304+
box-shadow: 0 12px 35px rgba(63, 63, 63, 0.4);
305+
}
306+
.forecast-card .icon {
307+
font-size: 3em;
308+
margin-left: 125px;
309+
margin-right: 20px;
310+
}
311+
.forecast-card .temp {
312+
font-size: 4.6em;
313+
font-weight: bold;
314+
margin-bottom: 15px;
315+
color: #173F5F;
316+
317+
}
318+
319+
320+
.forecast-card h4 {
321+
font-size: 1.2em;
322+
margin-bottom: 30px;
323+
color: #005da9;
324+
}
325+
326+
.forecast-card .weather-content {
327+
display: flex;
328+
justify-content: space-between;
329+
align-items: center;
330+
}
331+
332+
.forecast-card .temp {
333+
font-size: 3em;
334+
font-weight: bold;
335+
color: #005da9;
336+
}
337+
338+
.forecast-card .status {
339+
margin-top: 10px;
340+
font-size: 1.2em;
341+
color: #666;
342+
text-align: left;
343+
}
344+
252345
@media screen and (max-width: 768px) {
253346
.container {
254347
width: 95%;
@@ -297,6 +390,25 @@ footer {
297390
.forecast-day {
298391
min-width: calc(50% - 10px);
299392
}
393+
394+
395+
#city-name {
396+
font-size: 2em;
397+
}
398+
.forecast-card {
399+
width: calc(50% - 20px);
400+
}
401+
.forecast-card h4 {
402+
font-size: 1.5em;
403+
}
404+
405+
.forecast-card .temp {
406+
font-size: 2.5em;
407+
}
408+
409+
.forecast-card .status {
410+
font-size: 1.1em;
411+
}
300412
}
301413

302414
@media screen and (max-width: 480px) {
@@ -315,4 +427,29 @@ footer {
315427
.forecast-day {
316428
min-width: calc(100% - 10px);
317429
}
430+
.container {
431+
padding: 20px;
432+
}
433+
434+
#city-name {
435+
font-size: 1.8em;
436+
}
437+
438+
.forecast-card {
439+
width: 100%;
440+
441+
}
442+
443+
.forecast-card h4 {
444+
font-size: 1.3em;
445+
}
446+
447+
.forecast-card .temp {
448+
font-size: 2.2em;
449+
}
450+
451+
.forecast-card .status {
452+
font-size: 1em;
453+
}
318454
}
455+

‎weather_info.html‎

Lines changed: 49 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,8 +31,55 @@ <h3><i class="fas fa-temperature-high"></i> Current Weather</h3>
3131

3232
<section class="forecast">
3333
<h3><i class="fas fa-calendar-alt"></i> 5-Day Forecast</h3>
34-
<div id="forecast-info" class="forecast-container" style="display: flex; flex-direction: column;">
35-
<div id="forecasts" style="display: flex; flex-direction: column;">
34+
35+
<div id="forecast-info" class="forecast-container">
36+
<div id="forecasts" class ="forecasts-row">
37+
38+
<div class="forecast-card sunny">
39+
<h4 class="day">Monday, October 21</h4>
40+
<div class="weather-content">
41+
<div class="temp">24°C</div>
42+
<i class="fas fa-cloud-sun fa-3x icon"></i>
43+
</div>
44+
<p class="status">Partly Cloudy</p>
45+
</div>
46+
<div class="forecast-card cloudy">
47+
<h4 class="day">Tuesday, October 21</h4>
48+
49+
<div class="weather-content">
50+
<div class="temp">22°C</div>
51+
<i class="fas fa-cloud fa-3x icon"></i>
52+
</div>
53+
<p class="status">Cloudy</p>
54+
</div>
55+
<div class="forecast-card rainy">
56+
<h4 class="day">Wednesday, October 21</h4>
57+
58+
<div class="weather-content">
59+
<div class="temp">20°C</div>
60+
<i class="fas fa-cloud-rain fa-3x icon"></i>
61+
</div>
62+
<p class="status">Rainy</p>
63+
</div>
64+
<div class="forecast-card snowy">
65+
<h4 class="day">Thursday, October 21</h4>
66+
67+
<div class="weather-content">
68+
<div class="temp">-2°C</div>
69+
<i class="fas fa-snowflake fa-3x icon"></i>
70+
</div>
71+
<p class="status">Snowy</p>
72+
</div>
73+
<div class="forecast-card stormy">
74+
<h4 class="day">Friday, October 21</h4>
75+
76+
<div class="weather-content">
77+
<div class="temp">18°C</div>
78+
<i class="fas fa-bolt fa-3x icon"></i>
79+
</div>
80+
<p class="status">Stormy</p>
81+
</div>
82+
3683
</div>
3784
</div>
3885
</section>

0 commit comments

Comments
 (0)