Weather-App/style.css at main · Mustafa-KH-Hamad/Weather-App · GitHub

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
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;500;600;700&display=swap');

#All-container{
    border: 2px solid #8d99ae;
    background-color: black;
    color: whitesmoke;
    margin-top: 6rem;
}
.alert-text{
   display: none;
}


#searchbardiv{
    margin-top: 0.5rem;
    display: flex;
    justify-content: center;

}
#searchbar{
    display: block;
    border-radius: 90px;
    width: 75%;
    margin-right: 1rem;
    padding-left: 0.5rem;

}
#searchbar-img{
    cursor: pointer;
    margin-right: 1rem;
    margin-left: 1rem;
    width: 2rem;
    height: 2rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.031 16.6168L22.3137 20.8995L20.8995 22.3137L16.6168 18.031C15.0769 19.263 13.124 20 11 20C6.032 20 2 15.968 2 11C2 6.032 6.032 2 11 2C15.968 2 20 6.032 20 11C20 13.124 19.263 15.0769 18.031 16.6168ZM16.0247 15.8748C17.2475 14.6146 18 12.8956 18 11C18 7.1325 14.8675 4 11 4C7.1325 4 4 7.1325 4 11C4 14.8675 7.1325 18 11 18C12.8956 18 14.6146 17.2475 15.8748 16.0247L16.0247 15.8748Z' fill='rgba(255,255,255,1)'%3E%3C/path%3E%3C/svg%3E");
}
#weather-imgdiv{
    display: flex;
    justify-content: center;
}
.weather-img{
    margin-top: 2rem;
    width: 10rem;
    height: 10rem;

}
#weather-textdiv{
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}#location{
    margin-right: 1rem;
    font-family: 'Caveat', sans-serif;
    font-size: 2rem ;
    display: inline;
}
#weather-num{
    margin-right: 1rem;
    font-family: 'Caveat', sans-serif;
    font-size: 4rem ;
}
#weather-text{
    margin-right: 1rem;
    font-family: 'Caveat', sans-serif;
    font-size: 3rem ;
    margin-top: -1.5rem;
}
#winddiv{
    width: 30rem;
    margin-top: 3rem;
    display: flex;
    justify-content: space-between;
}
.hum{
    display: flex;
}
.hum-text{
    font-family: 'Caveat', sans-serif;
    font-size: 2rem;

}
#winddiv2{
    width: 30rem;
    margin-top: 3rem;
    display: flex;
    justify-content: space-between;
    margin-top: -.2rem;

}
.look{
    display: none;
}


@media only screen and (min-width: 1280px) {
    body {
        background-image: url(https://images.pexels.com/photos/209831/pexels-photo-209831.jpeg?cs=srgb&dl=pexels-pixabay-209831.jpg&fm=jpg);
        background-attachment: fixed;
        background-size: cover;
        background-repeat: no-repeat;
    }
    #All-container{
        border: 2px solid #8d99ae;
        background-color: black;
        color: whitesmoke;
        margin-top: 4rem;
    }
  }
  @media only screen and (max-width: 415px) {
    body {
        background-image: url(https://iphoneswallpapers.com/wp-content/uploads/2018/11/Beautiful-Weather-Beach-Nature-iPhone-Wallpaper.jpg);
        background-attachment: fixed;
        background-size: cover;
        background-repeat: no-repeat;
    }
    #All-container{
        border: 2px solid #8d99ae;
        background-color: black;
        color: whitesmoke;
        margin-top: 6rem;
        margin-left: 6rem;
        width: 25rem;
    }
    #wind{
        margin-right: 6rem;
    }
    #wind-text-respons{
        margin-right: 4rem;
    }
  }
  @media (min-width: 497px) and (max-width: 1280px) {

    body {
        background-image: url(https://wallpaper-house.com/data/out/12/wallpaper2you_579047.jpg);
        background-attachment: fixed;
        background-size: cover;
        background-repeat: no-repeat;
    }


}
@media (min-width: 415px) and (max-width: 495px) {

    body {
        background-image: url(https://wallpaper-house.com/data/out/12/wallpaper2you_579047.jpg);
        background-attachment: fixed;
        background-size: cover;
        background-repeat: no-repeat;
    }
    #All-container{
        border: 2px solid #8d99ae;
        background-color: black;
        color: whitesmoke;
        margin-top: 6rem;
        margin-left: 6rem;
    }
    #wind{
        margin-right: 5rem;
    }
    #wind-text-respons{
        margin-right: 1rem;
    }

}