Skip to content

Commit 8d339cf

Browse files
0plaze00plaze0
authored
Update style.css
1 parent 656d9f8 commit 8d339cf

1 file changed

Lines changed: 132 additions & 0 deletions

File tree

‎Projects/Weather APP/style.css‎

Lines changed: 132 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,133 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
body {
7+
background-image: url(https://images.unsplash.com/photo-1579546929518-9e396f3cc809?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80);
8+
height: 100vh;
9+
font-family: "Montserrat", sans-serif;
10+
background-repeat: no-repeat;
11+
background-size: cover;
12+
display: flex;
13+
justify-content: center;
14+
align-items: center;
15+
}
16+
.container {
17+
width: 70vh;
18+
height: 100vh;
19+
border-radius: 10px;
20+
/* From https://css.glass */
21+
background: rgba(202, 141, 141, 0.12);
22+
border-radius: 16px;
23+
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
24+
backdrop-filter: blur(4.5px);
25+
-webkit-backdrop-filter: blur(4.5px);
26+
border: 1px solid rgba(202, 141, 141, 0.4);
27+
display: grid;
28+
grid-template-rows: repeat(6, 1fr);
29+
}
30+
/* header */
31+
header {
32+
display: flex;
33+
justify-content: center;
34+
align-items: center;
35+
}
36+
header .search {
37+
position: relative;
38+
width: 100%;
39+
max-width: 400px;
40+
background: rgba(255, 255, 255, 0.2);
41+
display: flex;
42+
align-items: center;
43+
flex-wrap: wrap;
44+
border-radius: 60px;
45+
padding: 10px 20px;
46+
}
47+
48+
header .search__bar {
49+
background: transparent;
50+
flex: 1;
51+
border: none;
52+
border-radius: 20px;
53+
outline: none;
54+
color: #000000;
55+
}
56+
::placeholder {
57+
color: #6f6f79;
58+
}
59+
header .search__button {
60+
position: absolute;
61+
bottom: 5px;
62+
right: 2px;
63+
64+
background: transparent;
65+
border: none;
66+
border-radius: 50%;
67+
width: 30px;
68+
height: 30px;
69+
background: #999a9d;
70+
cursor: pointer;
71+
text-align: center;
72+
}
73+
74+
/* main */
75+
main {
76+
grid-row: 2 / 5;
77+
display: grid;
78+
grid-template-columns: repeat(5, 1fr);
79+
grid-template-rows: repeat(3, 1fr);
80+
}
81+
main .temp {
82+
position: relative;
83+
grid-row: 1 / 3;
84+
grid-column: 1 / 3;
85+
display: flex;
86+
justify-content: center;
87+
align-items: center;
88+
font-size: 50px;
89+
top: 10%;
90+
left: 20%;
91+
}
92+
ain .temp p {
93+
position: relative;
94+
top: 3%;
95+
left: 1%;
96+
}
97+
main .weather-icon {
98+
position: relative;
99+
grid-column: 3 / 6;
100+
grid-row: 1 / 3;
101+
display: flex;
102+
justify-content: center;
103+
align-items: center;
104+
font-size: 80px;
105+
top: 30px;
106+
left: 20px;
107+
}
108+
main .location {
109+
grid-row: 3;
110+
grid-column: 1/6;
111+
display: flex;
112+
justify-content: center;
113+
align-items: center;
114+
font-size: 50px;
115+
}
116+
/* footer */
117+
footer {
118+
display: flex;
119+
justify-content: space-around;
120+
align-items: center;
121+
margin-top: 20px;
122+
}
123+
@media only screen and (max-height: 800px) {
124+
main .temp {
125+
font-size: 30px;
126+
}
127+
main .weather-icon {
128+
position: relative;
129+
font-size: 60px;
130+
bottom: 80px;
131+
}
132+
}
1133

0 commit comments

Comments
 (0)