Skip to content

Commit cfee97b

Browse files
RGHANILOORGHANILOO
committed
Merge branch 'todd' into mergeFix2
2 parents 970b794 + bba107f commit cfee97b

File tree

9 files changed

+358
-118
lines changed

9 files changed

+358
-118
lines changed

Diff for: ‎.gitignore

+4
Original file line numberDiff line numberDiff line change
@@ -4,3 +4,7 @@ node_modules
44
/playwright-report/
55
/blob-report/
66
/playwright/.cache/
7+
8+
{
9+
"liveServer.settings.port": 5501
10+
}

Diff for: ‎.vscode/settings.json

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
// {
2+
// "liveServer.settings.port": 5501
3+
// }

Diff for: ‎public/CSS/city_styles.css

+226-65
Original file line numberDiff line numberDiff line change
@@ -1,115 +1,276 @@
1+
html, body {
2+
overflow: hidden;
3+
width: 100%;
4+
height: 100%;
5+
margin: 0;
6+
padding: 0;
7+
}
8+
19
body {
210
color: rgb(30,30,30);
311
background: rgb(250,247,204);
12+
font-family: Arial, Helvetica, sans-serif;
413
}
514

6-
.cityTriangle {
7-
width: 0;
8-
height: 0;
9-
border-left: 250px solid transparent;
10-
border-right: 1050px solid transparent;
11-
border-bottom: 500px solid rgb(255,165,30);
12-
margin: 350px -600px;
13-
}
1415

16+
17+
/* city name object */
1518
.cityRectWide {
16-
background: rgb(255,82,0);
17-
width: 800px;
19+
background: rgb(255, 82, 0);
20+
width: 600px;
1821
height: 120px;
1922
border-radius: 20px;
20-
margin: -80% 70%;
23+
margin: -1150px 70%;
24+
position: relative;
25+
box-shadow: 0px 4px 80px rgba(0, 0, 0, 0.4);
2126
}
22-
2327
h1 {
24-
position: fixed;
25-
font-family: Arial, Helvetica, sans-serif;
26-
28+
width: 450px;
29+
height: 75px;
30+
border-radius: 20px;
31+
background: transparent;
32+
position: absolute;
33+
top: 0;
34+
left: 0;
35+
font-size: 40px;
36+
color: rgb(30, 30, 30);
37+
outline: none;
38+
border: 0px;
39+
left: 20px;
40+
top: 5px;
2741
}
2842

43+
44+
45+
/* Return object */
2946
.cityCircleReturn {
3047
background: rgb(255,82,0);
3148
width: 80px;
3249
height: 80px;
3350
border-radius: 50%;
3451
display: grid;
35-
margin: 0 auto;
52+
margin: -79% 8%;
53+
position: relative;
54+
box-shadow: 0px 4px 100px rgba(0, 0, 0, 0.80);
55+
}
56+
.cityReturn {
57+
width: 80px;
58+
height: 80px;
59+
border-radius: 50%;
60+
background: transparent;
61+
font-size: 60px;
62+
position: absolute;
63+
left: 0;
64+
top: -4px;
65+
outline: none;
66+
border: 0px;
3667
}
68+
.return {
69+
border: solid black;
70+
border-width: 0 3px 3px 0;
71+
display: inline-block;
72+
padding: 3px;
73+
transform: rotate(135deg);
74+
-webkit-transform: rotate(135deg);
75+
position: absolute;
76+
left: 35px;
77+
}
78+
3779

80+
81+
/* Weather object */
3882
.cityCircle {
39-
background: rgb(0,173,56);
83+
background: rgb(0, 173, 56);
4084
width: 700px;
4185
height: 700px;
4286
border-radius: 50%;
43-
display: grid;
44-
margin: 0px;
87+
display: flex;
88+
justify-content: center;
89+
align-items: center;
90+
position: relative;
91+
overflow: hidden;
92+
margin: 990px 30%;
93+
box-shadow: 0px 6px 40px rgba(0, 0, 0, 0.5);
4594
}
46-
4795
p {
48-
height: 300px;
49-
width: 300px;
96+
height: 650px;
97+
width: 650px;
5098
position: relative;
51-
animation: effect 8s linear infinite;
99+
animation: effect 15s linear infinite;
52100
}
53-
54101
@keyframes effect {
55102
0% {
56-
transform: rotate(0deg);
103+
transform: rotate(0deg);
57104
}
58105
100% {
59-
transform: rotate(360deg);
106+
transform: rotate(360deg);
60107
}
61108
}
62-
63109
span {
64110
position: absolute;
65111
left: 50%;
66-
transform-origin: 0px 150px;
112+
transform-origin: 0px 325px;
67113
transform-style: flat;
68-
font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
69114
text-transform: uppercase;
70115
font-weight: 900;
71-
color: #fff;
72-
}/*# sourceMappingURL=index.css.map */
116+
color: rgb(30,30,30);
117+
font-size: 1rem;
118+
}
119+
120+
73121

122+
/* Image carousel container */
74123
.cityRectCarousel {
75124
background: rgb(35,58,108);
76-
width: 650px;
77-
height: 450px;
125+
width: 530px;
126+
height: 370px;
78127
border-radius: 20px;
79-
margin: 0;
128+
margin: 1300px 8%; /* Centering the carousel */
129+
box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.5);
130+
position: relative;
131+
overflow: hidden;
132+
}
133+
/* Carousel container */
134+
.carousel {
135+
display: flex;
136+
align-items: center;
137+
overflow: hidden;
138+
position: relative;
139+
height: 100%;
140+
}
141+
/* Slides container */
142+
.slides {
143+
display: flex;
144+
transition: transform 0.5s ease-in-out;
145+
scroll-behavior: smooth;
146+
width: 100%;
147+
}
148+
/* Individual slides (images) */
149+
.slides img {
150+
flex: 0 0 90%;
151+
width: 90%;
152+
height: auto;
153+
margin: 0 auto;
154+
display: block;
155+
}
156+
.prev, .next {
157+
position: absolute;
158+
top: 50%;
159+
transform: translateY(-50%);
160+
padding: 10px 20px;
161+
background-color: rgb(255, 82, 0);
162+
color: #ededed;
163+
border: none;
164+
cursor: pointer;
165+
border-radius: 5px;
166+
z-index: 1;
167+
}
168+
.next {
169+
right: 20px;
170+
}
171+
.prev {
172+
left: 20px;
173+
}
174+
.back {
175+
border: solid black;
176+
border-width: 0 3px 3px 0;
177+
display: inline-block;
178+
padding: 2px;
179+
transform: rotate(135deg);
180+
-webkit-transform: rotate(135deg);
181+
position: absolute;
182+
left: 15px;
183+
top: 7px
80184
}
185+
.forward {
186+
border: solid black;
187+
border-width: 0 3px 3px 0;
188+
display: inline-block;
189+
padding: 2px;
190+
transform: rotate(315deg);
191+
-webkit-transform: rotate(315deg);
192+
position: absolute;
193+
left: 15px;
194+
top: 7px
195+
}
196+
81197

198+
199+
/* Currency and About object */
82200
.cityRectTall {
83-
background: rgb(255,165,30);
84-
width: 400px;
85-
height: 750px;
201+
background: rgb(255, 165, 30);
202+
width: 350px;
203+
height: 500px;
204+
border-radius: 20px;
205+
margin: 500px 1050px;
206+
position: relative;
207+
box-shadow: 0px 3px 30px rgba(0, 0, 0, 0.7);
208+
}
209+
h3 {
210+
width: 450px;
211+
height: 75px;
212+
border-radius: 20px;
213+
background: transparent;
214+
position: absolute;
215+
margin: 0 auto;
216+
font-size: 30px;
217+
color: rgb(30, 30, 30);
218+
outline: none;
219+
border: 0px;
220+
left: 20px;
221+
top: 20px;
222+
}
223+
h4 {
224+
width: 450px;
225+
height: 75px;
86226
border-radius: 20px;
87-
margin: -80% 1100px;
88-
}
89-
90-
.cityHexagon {
91-
height: 200px;
92-
width: 120px;
93-
background: rgb(0,173,56);
94-
position:relative;
95-
left:50px;
96-
box-sizing: border-box;
97-
}
98-
.cityHexagon::before, .cityHexagon::after {
99-
content:"";
100-
position: absolute;
101-
height: 0;
102-
width: 0;
103-
top:0;
104-
/* half height */
105-
border-top: 100px solid transparent;
106-
border-bottom: 100px solid transparent;
107-
}
108-
.cityHexagon::before {
109-
left:-50px;
110-
border-right:50px solid rgb(0,173,56);
111-
}
112-
.cityHexagon::after {
113-
right:-50px;
114-
border-left:50px solid rgb(0,173,56);
227+
background: transparent;
228+
position: absolute;
229+
margin: 0 auto;
230+
font-size: 30px;
231+
color: rgb(30, 30, 30);
232+
outline: none;
233+
border: 0px;
234+
left: 20px;
235+
top: 100px;
236+
}
237+
238+
239+
240+
/* Time object */
241+
.cityTimeCircle {
242+
background: rgb(35, 58, 108);
243+
width: 290px;
244+
height: 290px;
245+
border-radius: 50%;
246+
margin: -1130px 53%;
247+
position: relative;
248+
box-shadow: 0px 4px 60px rgba(0, 0, 0, 0.8);
249+
}
250+
h2 {
251+
width: 450px;
252+
height: 75px;
253+
border-radius: 20px;
254+
background: transparent;
255+
position: absolute;
256+
margin: 100px auto;
257+
font-size: 40px;
258+
color: rgb(30, 30, 30);
259+
outline: none;
260+
border: 0px;
261+
left: 90px;
262+
top: 10px;
263+
align-items:center;
264+
}
265+
266+
267+
268+
/* Background image */
269+
.cityTriangle {
270+
width: 0;
271+
height: 0;
272+
border-left: 250px solid transparent;
273+
border-right: 1050px solid transparent;
274+
border-bottom: 500px solid rgb(255,165,30);
275+
margin: 350px -600px;
115276
}

0 commit comments

Comments
 (0)