-
Notifications
You must be signed in to change notification settings - Fork 0
/
style.css
102 lines (88 loc) · 2.31 KB
/
style.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
body {
font-family: Arial, sans-serif;
/* background-color: #f1f1f1; */
background-image: url(https://www-cdn.eumetsat.int/files/styles/16_9_large/s3/2021-10/storm-Single-cell-thunderstorm-cloud_0.jpg?h=e5aec6c8&itok=g4JvmBRa);
/* https://res.cloudinary.com/practicaldev/image/fetch/s--BFZvxfoy--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://images.unsplash.com/photo-1545193544-312983719627%3Fixlib%3Drb-1.2.1%26ixid%3DeyJhcHBfaWQiOjEyMDd9%26auto%3Dformat%26fit%3Dcrop%26w%3D1650%26q%3D80 */
background-size: cover;
background-position: center;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
font-family: 'Lora', serif;
}
#weather-container {
text-align: center;
background: rgba(255, 255, 255, .1);
backdrop-filter:blur(20px);
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
color: white;
border: 3.5px solid rgba(255, 255, 255, .3)
}
#search-bar {
display: flex;
align-items: center;
justify-content: space-between;
/* margin-bottom: 20px; */
}
#location-icon {
cursor: pointer;
font-size: 1.7rem;
}
#search-input {
flex: 1;
padding: 8px;
border: 1px solid #ccc;
border-radius: 4px;
margin: 0 10px;
font-size: 1.25rem;
font-family: 'Lora', serif;
background: rgba(255, 255, 255, .1);
color: white;
}
#search-icon {
cursor: pointer;
font-size: 1.7rem;
}
#weather-info {
display: none;
margin-top: 20px;
margin-bottom: 20px;
font-size: 1.25rem;
}
#weather-info div{
padding: 5px;
}
#temperature{
font-size: 3rem;
font-weight: bold;
}
#weather-icon img {
max-width: 100%;
max-height: 100%;
width: 150px;
height: 150px;
}
@media only screen and (max-width: 600px) {
#search-bar {
flex-direction: row;
justify-content: space-around;
margin-top: 10px;
}
#search-input {
margin: 4px;
}
#weather-container {
padding: 10px;
margin: 5px 0px 5px 0px;
}
#weather-info {
font-size: 1rem;
}
#temperature {
font-size: 2rem;
}
}