Skip to content

Commit be869bd

Browse files
RGHANILOORGHANILOO
authored
Merge pull request #9 from fac31/cssFixUp
Css fix up
2 parents 1c4d3f9 + ef2cb10 commit be869bd

File tree

10 files changed

+249
-363
lines changed

10 files changed

+249
-363
lines changed

Diff for: ‎.vscode/settings.json

-3
This file was deleted.

Diff for: ‎public/CSS/city_styles.css

+129-224
Original file line numberDiff line numberDiff line change
@@ -1,264 +1,169 @@
1-
html,
2-
body {
3-
overflow: hidden;
4-
width: 100%;
5-
height: 100%;
1+
* {
62
margin: 0;
73
padding: 0;
84
}
9-
5+
html {
6+
box-sizing: border-box;
7+
font-size: 62.5%;
8+
scroll-behavior: smooth;
9+
}
1010
body {
11+
font-size: 1.8rem;
12+
font-weight: 400;
13+
line-height: 1.4;
14+
padding: 15px;
1115
color: rgb(30, 30, 30);
1216
background: rgb(250, 247, 204);
13-
font-family: Arial, Helvetica, sans-serif;
17+
font-family: "Poppins", sans-serif;
18+
display: grid;
19+
height: 100vh;
20+
display: grid;
21+
grid:
22+
"back back . . weather weather weather . city city city ." 1fr
23+
". . . . weather weather weather . . . currency currency" 1fr
24+
". carousel carousel carousel . . . . . . currency currency" 1fr
25+
". carousel carousel carousel . . . time time . . ." 1fr
26+
/ 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
27+
gap: 8px 20px;
28+
}
29+
/* current weather card start */
30+
.cwWeatherContainer {
31+
background-color: #8a8a1e;
32+
padding: 20px;
33+
border-radius: 10px;
34+
width: 400px;
35+
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
1436
}
1537

16-
/* city name object */
17-
.cityRectWide {
18-
background: rgb(255, 82, 0);
19-
width: 600px;
20-
height: 120px;
21-
border-radius: 20px;
22-
margin: -1150px 70%;
23-
position: relative;
24-
box-shadow: 0px 4px 80px rgba(0, 0, 0, 0.4);
38+
.cwHeader {
39+
text-align: center;
40+
border-bottom: 1px solid white;
41+
margin-bottom: 20px;
2542
}
26-
h1 {
27-
width: 450px;
28-
height: 75px;
29-
border-radius: 20px;
30-
background: transparent;
31-
position: absolute;
32-
top: 0;
33-
left: 0;
34-
font-size: 40px;
35-
color: rgb(30, 30, 30);
36-
outline: none;
37-
border: 0px;
38-
left: 20px;
39-
top: 5px;
43+
44+
.cwMain {
45+
display: flex;
46+
justify-content: space-between;
4047
}
4148

42-
/* Return object */
43-
.cityCircleReturn {
44-
background: rgb(255, 82, 0);
45-
width: 80px;
46-
height: 80px;
47-
border-radius: 50%;
48-
display: grid;
49-
margin: -79% 8%;
50-
position: relative;
51-
box-shadow: 0px 4px 100px rgba(0, 0, 0, 0.8);
49+
.cwTemperature {
50+
text-align: center;
5251
}
53-
.cityReturn {
54-
width: 80px;
55-
height: 80px;
56-
border-radius: 50%;
57-
background: transparent;
58-
font-size: 60px;
59-
position: absolute;
60-
left: 0;
61-
top: -4px;
62-
outline: none;
63-
border: 0px;
52+
53+
.cwTemperature img {
54+
width: 60px;
6455
}
65-
.return {
66-
border: solid black;
67-
border-width: 0 3px 3px 0;
68-
display: inline-block;
69-
padding: 3px;
70-
transform: rotate(135deg);
71-
-webkit-transform: rotate(135deg);
72-
position: absolute;
73-
left: 35px;
56+
57+
.cwTempValue {
58+
font-size: 48px;
59+
font-weight: bold;
7460
}
7561

76-
/* Weather object */
77-
.cityCircle {
78-
background: rgb(0, 173, 56);
79-
width: 700px;
80-
height: 700px;
81-
border-radius: 50%;
62+
.cwFeelsLike {
63+
font-size: 18px;
64+
}
65+
66+
.cwDetails {
67+
font-size: 14px;
68+
}
69+
70+
.cwFooter {
8271
display: flex;
72+
justify-content: space-between;
73+
margin-top: 20px;
74+
font-size: 14px;
75+
border-top: 1px solid white;
76+
padding-top: 10px;
77+
}
78+
/* cuurent weatehr card end */
79+
80+
/* forecast carousel begin */
81+
.card-image {
82+
max-width: 200px;
83+
display: flex;
84+
flex-direction: column;
8385
justify-content: center;
8486
align-items: center;
85-
position: relative;
86-
overflow: hidden;
87-
margin: 990px 30%;
88-
box-shadow: 0px 6px 40px rgba(0, 0, 0, 0.5);
8987
}
90-
p {
91-
height: 650px;
92-
width: 650px;
93-
position: relative;
94-
animation: effect 15s linear infinite;
95-
}
96-
@keyframes effect {
97-
0% {
98-
transform: rotate(0deg);
99-
}
100-
100% {
101-
transform: rotate(360deg);
102-
}
88+
.vertical {
89+
max-height: 400px;
90+
91+
10392
}
104-
span {
105-
position: absolute;
106-
left: 50%;
107-
transform-origin: 0px 325px;
108-
transform-style: flat;
109-
text-transform: uppercase;
110-
font-weight: 900;
111-
color: rgb(30, 30, 30);
112-
font-size: 1rem;
93+
94+
.vertical::part(base) {
95+
grid-template-areas: 'slides slides pagination';
11396
}
11497

115-
/* Image carousel container */
116-
.cityRectCarousel {
117-
background: rgb(35, 58, 108);
118-
width: 530px;
119-
height: 370px;
120-
border-radius: 20px;
121-
margin: 1300px 8%; /* Centering the carousel */
122-
box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.5);
123-
position: relative;
124-
overflow: hidden;
98+
.vertical::part(pagination) {
99+
flex-direction: column;
125100
}
126-
/* Carousel container */
127-
.carousel {
101+
102+
.vertical::part(navigation) {
103+
transform: rotate(90deg);
128104
display: flex;
129-
align-items: center;
130-
overflow: hidden;
131-
position: relative;
132-
height: 100%;
133105
}
134-
/* Slides container */
135-
.slides {
106+
107+
/* forecast carousel end */
108+
109+
110+
.cityReturn {
111+
grid-area: back;
136112
display: flex;
137-
transition: transform 0.5s ease-in-out;
138-
scroll-behavior: smooth;
139-
width: 100%;
113+
justify-content: center;
114+
align-items: center;
115+
background: rgb(255, 82, 0);
116+
width: 80px;
117+
height: 80px;
118+
position: absolute;
119+
border-radius: 50%;
120+
margin-left: 15px;
121+
margin-top: 20px;
140122
}
141-
/* Individual slides (images) */
142-
.slides img {
143-
flex: 0 0 90%;
144-
width: 90%;
145-
height: auto;
146-
margin: 0 auto;
147-
display: block;
123+
124+
/* carousel */
125+
.cityRectCarousel {
126+
grid-area: carousel;
127+
height: 400px;
128+
width:600px
129+
148130
}
149-
.prev,
150-
.next {
151-
position: absolute;
152-
top: 50%;
153-
transform: translateY(-50%);
154-
padding: 10px 20px;
155-
background-color: rgb(255, 82, 0);
156-
color: #ededed;
157-
border: none;
158-
cursor: pointer;
159-
border-radius: 5px;
160-
z-index: 1;
131+
132+
/* weatehr circle thing */
133+
.cityCircle {
134+
grid-area: weather;
161135
}
162-
.next {
163-
right: 20px;
136+
/* time circle thing */
137+
.cityTimeCircle {
138+
grid-area: time;
139+
height: 30vh;
140+
display: flex;
141+
align-items: center;
164142
}
165-
.prev {
166-
left: 20px;
143+
.card-image {
144+
max-width: 200px;
167145
}
168-
.back {
169-
border: solid black;
170-
border-width: 0 3px 3px 0;
171-
display: inline-block;
172-
padding: 2px;
173-
transform: rotate(135deg);
174-
-webkit-transform: rotate(135deg);
175-
position: absolute;
176-
left: 15px;
177-
top: 7px;
146+
.card-image > p {
147+
font-size: 1.2rem;
148+
justify-content: center;
178149
}
179-
.forward {
180-
border: solid black;
181-
border-width: 0 3px 3px 0;
182-
display: inline-block;
183-
padding: 2px;
184-
transform: rotate(315deg);
185-
-webkit-transform: rotate(315deg);
186-
position: absolute;
187-
left: 15px;
188-
top: 7px;
150+
/* city name thing */
151+
.cityRectWide {
152+
grid-area: city;
189153
}
190154

191-
/* Currency and About object */
155+
/* currency and about ? */
192156
.cityRectTall {
193-
background: rgb(255, 165, 30);
194-
width: 350px;
195-
height: 500px;
196-
border-radius: 20px;
197-
margin: 500px 1050px;
198-
position: relative;
199-
box-shadow: 0px 3px 30px rgba(0, 0, 0, 0.7);
200-
}
201-
h3 {
202-
width: 450px;
203-
height: 75px;
204-
border-radius: 20px;
205-
background: transparent;
206-
position: absolute;
207-
margin: 0 auto;
208-
font-size: 30px;
209-
color: rgb(30, 30, 30);
210-
outline: none;
211-
border: 0px;
212-
left: 20px;
213-
top: 20px;
214-
}
215-
h4 {
216-
width: 450px;
217-
height: 75px;
218-
border-radius: 20px;
219-
background: transparent;
220-
position: absolute;
221-
margin: 0 auto;
222-
font-size: 30px;
223-
color: rgb(30, 30, 30);
224-
outline: none;
225-
border: 0px;
226-
left: 20px;
227-
top: 100px;
157+
grid-area: currency;
228158
}
229159

230-
/* Time object */
231-
.cityTimeCircle {
232-
background: rgb(35, 58, 108);
233-
width: 290px;
234-
height: 290px;
235-
border-radius: 50%;
236-
margin: -1130px 53%;
237-
position: relative;
238-
box-shadow: 0px 4px 60px rgba(0, 0, 0, 0.8);
239-
}
240-
h2 {
241-
width: 450px;
242-
height: 75px;
160+
/* city name object */
161+
.cityRectWide {
162+
background: rgb(255, 82, 0);
163+
height: 120px;
243164
border-radius: 20px;
244-
background: transparent;
245-
position: absolute;
246-
margin: 100px auto;
247-
font-size: 40px;
248-
color: rgb(30, 30, 30);
249-
outline: none;
250-
border: 0px;
251-
left: 90px;
252-
top: 10px;
253-
align-items: center;
254-
}
165+
/* position: relative; */
166+
box-shadow: 0px 4px 80px rgba(0, 0, 0, 0.4);
167+
margin-top: 15px;
255168

256-
/* Background image */
257-
.cityTriangle {
258-
width: 0;
259-
height: 0;
260-
border-left: 250px solid transparent;
261-
border-right: 1050px solid transparent;
262-
border-bottom: 500px solid rgb(255, 165, 30);
263-
margin: 350px -600px;
264169
}

Diff for: ‎public/CSS/styles.css

Whitespace-only changes.

0 commit comments

Comments
 (0)