Skip to content

Commit c49c2c7

Browse files
git112git112
committed
Forecast cards(html css)
1 parent 2c496f2 commit c49c2c7

File tree

2 files changed

+193
-11
lines changed

2 files changed

+193
-11
lines changed

‎css/style.css‎

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

34
body {
@@ -12,7 +13,7 @@ body {
1213
}
1314

1415
.container {
15-
max-width: 800px;
16+
max-width: 1200px;
1617
width: 90%;
1718
padding: 30px;
1819
background-color: rgba(255, 255, 255, 0.9);
@@ -211,12 +212,6 @@ footer {
211212
margin: 5px 0 0;
212213
}
213214

214-
.forecast-container {
215-
display: flex;
216-
justify-content: space-between;
217-
flex-wrap: wrap;
218-
}
219-
220215
.forecast-day {
221216
text-align: center;
222217
padding: 10px;
@@ -249,6 +244,102 @@ footer {
249244
margin-right: 10px;
250245
}
251246

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

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

‎weather_info.html‎

Lines changed: 51 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
11
<!DOCTYPE html>
22
<html lang="en">
3+
34
<head>
45
<meta charset="UTF-8">
56
<meta name="viewport" content="width=device-width, initial-scale=1.0">
67
<link rel="stylesheet" href="./css/style.css">
78
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
89
<title>Weather Information</title>
910
</head>
11+
1012
<body>
1113
<div class="container">
1214
<div id="weather-data" class="visible">
@@ -31,8 +33,52 @@ <h3><i class="fas fa-temperature-high"></i> Current Weather</h3>
3133

3234
<section class="forecast">
3335
<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;">
36+
<div id="forecast-info" class="forecast-container">
37+
<div id="forecasts" class="forecasts-row">
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>
3682
</div>
3783
</div>
3884
</section>
@@ -55,10 +101,11 @@ <h3><i class="fas fa-tint"></i> Rain & Humidity</h3>
55101
</div>
56102

57103
<footer>
58-
<p>&copy; 2023 Weather.io. All rights reserved.</p>
104+
<p>&copy; 2024 Weather.io. All rights reserved.</p>
59105
</footer>
60106
</div>
61107

62108
<script src="./index.js"></script>
63109
</body>
64-
</html>
110+
111+
</html>

0 commit comments

Comments
 (0)