Skip to content

Commit b6856ea

Browse files
gantavyamalviyagantavyamalviya
authored
Merge pull request #21 from sceary-expert/main
Added Icons, responsiveness
2 parents 0b24b76 + 606eb54 commit b6856ea

9 files changed

Lines changed: 458 additions & 168 deletions

File tree

‎Weather Forecast Webapp/css/style.css‎

Lines changed: 219 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -1,95 +1,224 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
12
*{
2-
margin: 0;
3-
padding: 0;
4-
}
5-
6-
body {
7-
background:linear-gradient(90deg,#614385, #516395);
8-
line-height: 1.5;
9-
font-size: 125%;
10-
display: flex;
11-
}
12-
13-
/*--------------------------------------- CARD ------------------------------------------*/
14-
15-
.container {
16-
position: relative;
17-
background: rgba( 255, 255, 255, 0.25 );
18-
box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
19-
backdrop-filter: blur( 4px );
20-
-webkit-backdrop-filter: blur( 4px );
21-
border-radius: 10px;
22-
border: 1px solid rgba( 255, 255, 255, 0.18 );
23-
padding: 0 1em 1em;
24-
margin: 150px 500px 400px auto;
25-
-webkit-filter: drop-shadow(0 1em 1em rgba(226, 91, 91, 0.1));
26-
filter: drop-shadow(0 1em 1em rgba(226, 91, 91, 0.1));
27-
border-radius: 10px;
28-
-webkit-border-radius: 10px;
29-
-moz-border-radius: 10px;
30-
-ms-border-radius: 10px;
31-
-o-border-radius: 10px;
32-
overflow: hidden;
3+
margin: 0;
4+
padding: 0;
5+
box-sizing: border-box;
6+
font-family: 'Poppins', sans-serif;
337
}
8+
body{
9+
display: flex;
10+
align-items: center;
11+
justify-content: center;
12+
min-height: 100vh;
13+
background:linear-gradient(90deg,#614385, #516395);
14+
}
15+
::selection{
16+
background: rgba( 255, 255, 255, 0.25 );
17+
box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
18+
backdrop-filter: blur( 4px );
19+
-webkit-backdrop-filter: blur( 4px );
20+
}
21+
.wrapper{
22+
width: 400px;
23+
background: rgba( 255, 255, 255, 0.25 );
24+
box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
25+
backdrop-filter: blur( 4px );
26+
-webkit-backdrop-filter: blur( 4px );
27+
border: 1px solid rgba( 255, 255, 255, 0.18 );
28+
-webkit-filter: drop-shadow(0 1em 1em rgba(226, 91, 91, 0.1));
29+
filter: drop-shadow(0 1em 1em rgba(226, 91, 91, 0.1));
30+
}
31+
.wrapper header{
32+
display: flex;
33+
font-size: 21px;
34+
font-weight: 500;
3435

35-
/*-------------------------------- FOR THE TILTED CARD------------------------------------ */
36-
37-
38-
39-
/* ------------------------------------------------------------------------------------------*/
40-
41-
.content {
42-
position: relative;
43-
margin: 0 60px auto;
44-
padding: 0 1em;
45-
}
36+
padding: 16px 15px;
37+
align-items: center;
38+
background: rgba( 255, 255, 255, 0.25 );
39+
box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
40+
backdrop-filter: blur( 4px );
41+
-webkit-backdrop-filter: blur( 4px );
42+
}
43+
header i{
44+
font-size: 0em;
45+
cursor: pointer;
46+
margin-right: 8px;
47+
}
48+
.wrapper.active header i{
49+
margin-left: 5px;
50+
font-size: 30px;
51+
}
52+
.wrapper .input-part{
53+
margin: 20px 25px 30px;
54+
}
55+
.wrapper.active .input-part{
56+
display: none;
57+
}
58+
.input-part .info-txt{
59+
display: none;
60+
font-size: 17px;
61+
text-align: center;
62+
padding: 12px 10px;
63+
border-radius: 7px;
64+
margin-bottom: 15px;
65+
}
66+
.input-part .info-txt.error{
67+
background: rgba( 255, 255, 255, 0.25 );
68+
box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
69+
backdrop-filter: blur( 4px );
70+
-webkit-backdrop-filter: blur( 4px );
71+
}
72+
.input-part .info-txt.pending{
73+
background: rgba( 255, 255, 255, 0.25 );
74+
box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
75+
backdrop-filter: blur( 4px );
76+
-webkit-backdrop-filter: blur( 4px );
77+
}
78+
.input-part :where(input, button){
79+
width: 100%;
80+
height: 55px;
81+
border: none;
82+
outline: none;
83+
font-size: 18px;
84+
border-radius: 7px;
85+
}
86+
.input-part input{
87+
text-align: center;
88+
padding: 0 15px;
89+
background: rgba( 255, 255, 255, 0.25 );
90+
box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
91+
backdrop-filter: blur( 4px );
92+
-webkit-backdrop-filter: blur( 4px );
93+
}
94+
.input-part input:is(:focus, :valid){
95+
background: rgba( 255, 255, 255, 0.25 );
96+
box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
97+
backdrop-filter: blur( 4px );
98+
-webkit-backdrop-filter: blur( 4px );
99+
}
100+
.input-part input::placeholder{
101+
background: rgba( 255, 255, 255, 0.25 );
102+
box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
103+
backdrop-filter: blur( 4px );
104+
-webkit-backdrop-filter: blur( 4px );
105+
}
106+
.input-part .separator{
107+
height: 1px;
108+
width: 100%;
109+
margin: 25px 0;
110+
background: rgba( 255, 255, 255, 0.25 );
111+
box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
112+
backdrop-filter: blur( 4px );
113+
-webkit-backdrop-filter: blur( 4px );
114+
position: relative;
115+
display: flex;
116+
align-items: center;
117+
justify-content: center;
118+
}
119+
.separator::before{
120+
content: "or";
121+
border: 1px solid rgba( 255, 255, 255, 0.18 );
122+
font-size: 19px;
123+
padding: 0 15px;
124+
background: rgba( 255, 255, 255, 0.25 );
125+
box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
126+
backdrop-filter: blur( 4px );
127+
-webkit-backdrop-filter: blur( 4px );
128+
}
129+
.input-part button{
46130

47-
h1 {
48-
border-bottom: 4px solid rebeccapurple;
49-
padding-bottom: 0.25em;
50-
margin-bottom: 0.25em;
51-
text-align: center;
52-
font-family: Verdana, Geneva, Tahoma, sans-serif;
131+
cursor: pointer;
132+
background: rgba( 255, 255, 255, 0.25 );
133+
box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
134+
backdrop-filter: blur( 4px );
135+
-webkit-backdrop-filter: blur( 4px );
136+
transition: 0.3s ease;
137+
}
138+
.input-part button:hover{
139+
background: rgba(98, 80, 149, 0.25);
140+
}
53141

54-
}
55-
56-
/*----------------------------------- INPUT BOX---------------------------------------*/
57-
58-
.input {
59-
width: 100%;
60-
border: none;
61-
outline: none;
62-
font-size: 1.4rem;
63-
height: 50px;
64-
padding: 10px 10px;
65-
text-align: center;
66-
font-weight: bold;
67-
background: rgba( 255, 255, 255, 0.25 );
68-
box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
69-
backdrop-filter: blur( 4px );
70-
-webkit-backdrop-filter: blur( 4px );
71-
border-radius: 10px;
72-
border: 1px solid rgba( 255, 255, 255, 0.18 );
73-
}
74-
75-
/*------------------------------------DETAILS----------------------------------------- */
76-
77-
.main-weather {
78-
display: none;
79-
padding: 20px;
80-
line-height: 2.2rem;
81-
border-radius: 10px;
82-
height: 30vh;
83-
text-align: center;
84-
color: #23313E;
85-
font-weight: bold;
86-
}
87-
88-
.temp {
89-
90-
margin: 25px ;
91-
font-size:40pt;
92-
font-weight: 700;
93-
}
94-
95-
/*---------------------------------------------------------------------------------------*/
142+
.wrapper .weather-part{
143+
display: none;
144+
margin: 30px 0 0;
145+
align-items: center;
146+
justify-content: center;
147+
flex-direction: column;
148+
}
149+
.wrapper.active .weather-part{
150+
display: flex;
151+
}
152+
.weather-part img{
153+
max-width: 125px;
154+
}
155+
.weather-part .temp{
156+
display: flex;
157+
font-weight: 500;
158+
font-size: 72px;
159+
}
160+
.weather-part .temp .numb{
161+
font-weight: 600;
162+
}
163+
.weather-part .temp .deg{
164+
font-size: 40px;
165+
display: block;
166+
margin: 10px 5px 0 0;
167+
}
168+
.weather-part .weather{
169+
font-size: 21px;
170+
text-align: center;
171+
margin: -5px 20px 15px;
172+
}
173+
.weather-part .location{
174+
display: flex;
175+
font-size: 19px;
176+
padding: 0 20px;
177+
text-align: center;
178+
margin-bottom: 30px;
179+
align-items: flex-start;
180+
}
181+
.location i{
182+
font-size: 22px;
183+
margin: 4px 5px 0 0;
184+
}
185+
.weather-part .bottom-details{
186+
display: flex;
187+
width: 100%;
188+
justify-content: space-between;
189+
border-top: 1px solid #ccc;
190+
}
191+
.bottom-details .column{
192+
display: flex;
193+
width: 100%;
194+
padding: 15px 0;
195+
align-items: center;
196+
justify-content: center;
197+
}
198+
.column i{
199+
color: #5449a7;
200+
font-size: 40px;
201+
}
202+
.column.humidity{
203+
border-left: 1px solid rgb(145, 139, 185);
204+
}
205+
.column .details{
206+
margin-left: 3px;
207+
}
208+
.details .temp, .humidity span{
209+
font-size: 18px;
210+
font-weight: 500;
211+
margin-top: -3px;
212+
}
213+
.details .temp .deg{
214+
margin: 0;
215+
font-size: 17px;
216+
padding: 0 2px 0 1px;
217+
}
218+
.column .details p{
219+
font-size: 14px;
220+
margin-top: -6px;
221+
}
222+
.humidity i{
223+
font-size: 37px;
224+
}

0 commit comments

Comments
 (0)