Skip to content

Commit 9521a1b

Browse files
onnhydonnhyd
committed
-Added Icons, responsiveness
Changed the alignment of the components so that they can be centered. Added Icons For Better User Experience. Added Responsiveness for better vivibility in Different device with different size.
1 parent 756036c commit 9521a1b

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)