Skip to content

Commit 2c496f2

Browse files
Vatsal2054Vatsal2054
authored
Merge pull request #16 from clubgamma/revert-15-my-new-branch
Revert "Added Forecast Cards"
2 parents ed12aa5 + c98a2eb commit 2c496f2

File tree

2 files changed

+9
-193
lines changed

2 files changed

+9
-193
lines changed

‎css/style.css‎

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

53
body {
@@ -14,7 +12,7 @@ body {
1412
}
1513

1614
.container {
17-
max-width: 1200px;
15+
max-width: 800px;
1816
width: 90%;
1917
padding: 30px;
2018
background-color: rgba(255, 255, 255, 0.9);
@@ -213,6 +211,12 @@ footer {
213211
margin: 5px 0 0;
214212
}
215213

214+
.forecast-container {
215+
display: flex;
216+
justify-content: space-between;
217+
flex-wrap: wrap;
218+
}
219+
216220
.forecast-day {
217221
text-align: center;
218222
padding: 10px;
@@ -245,103 +249,6 @@ footer {
245249
margin-right: 10px;
246250
}
247251

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-
345252
@media screen and (max-width: 768px) {
346253
.container {
347254
width: 95%;
@@ -390,25 +297,6 @@ footer {
390297
.forecast-day {
391298
min-width: calc(50% - 10px);
392299
}
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-
}
412300
}
413301

414302
@media screen and (max-width: 480px) {
@@ -427,29 +315,4 @@ footer {
427315
.forecast-day {
428316
min-width: calc(100% - 10px);
429317
}
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-
}
454318
}
455-

‎weather_info.html‎

Lines changed: 2 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -31,55 +31,8 @@ <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-
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-
34+
<div id="forecast-info" class="forecast-container" style="display: flex; flex-direction: column;">
35+
<div id="forecasts" style="display: flex; flex-direction: column;">
8336
</div>
8437
</div>
8538
</section>

0 commit comments

Comments
 (0)