Skip to content

Commit 7f5d61a

Browse files
aayush105aayush105
authored
Merge pull request #886 from Kanavpreet-Singh/feature/night-city
Feature/night city
2 parents 910143d + 1c1dca0 commit 7f5d61a

File tree

5 files changed

+1514
-0
lines changed

5 files changed

+1514
-0
lines changed

‎Night City/index.html‎

Lines changed: 245 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,245 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Night City - Pure CSS Animation</title>
7+
<link rel="stylesheet" href="style.css" />
8+
</head>
9+
<body>
10+
<!-- Scene: City (default active) -->
11+
<div id="city" class="scene scene--city">
12+
<div class="sky">
13+
<div class="moon"></div>
14+
<div class="stars stars-layer-1"></div>
15+
<div class="stars stars-layer-2"></div>
16+
<div class="stars stars-layer-3"></div>
17+
<div class="clouds">
18+
<div class="cloud cloud-1"></div>
19+
<div class="cloud cloud-2"></div>
20+
<div class="cloud cloud-3"></div>
21+
</div>
22+
</div>
23+
24+
<div class="neon-signs">
25+
<div class="neon-sign neon-pink">NIGHT CITY</div>
26+
</div>
27+
28+
<div class="city">
29+
<div class="building b1">
30+
<div class="antenna"></div>
31+
<div class="windows">
32+
<div class="window"></div>
33+
<div class="window"></div>
34+
<div class="window"></div>
35+
<div class="window"></div>
36+
<div class="window"></div>
37+
<div class="window"></div>
38+
</div>
39+
</div>
40+
<div class="building b2">
41+
<div class="windows">
42+
<div class="window"></div>
43+
<div class="window"></div>
44+
<div class="window"></div>
45+
<div class="window"></div>
46+
<div class="window"></div>
47+
<div class="window"></div>
48+
<div class="window"></div>
49+
<div class="window"></div>
50+
</div>
51+
</div>
52+
<div class="building b3">
53+
<div class="antenna antenna-tall"></div>
54+
<div class="windows">
55+
<div class="window"></div>
56+
<div class="window"></div>
57+
<div class="window"></div>
58+
<div class="window"></div>
59+
<div class="window"></div>
60+
<div class="window"></div>
61+
<div class="window"></div>
62+
<div class="window"></div>
63+
<div class="window"></div>
64+
</div>
65+
</div>
66+
<div class="building b4">
67+
<div class="rooftop"></div>
68+
<div class="windows">
69+
<div class="window"></div>
70+
<div class="window"></div>
71+
<div class="window"></div>
72+
<div class="window"></div>
73+
<div class="window"></div>
74+
<div class="window"></div>
75+
<div class="window"></div>
76+
<div class="window"></div>
77+
<div class="window"></div>
78+
<div class="window"></div>
79+
</div>
80+
</div>
81+
<div class="building b5">
82+
<div class="windows">
83+
<div class="window"></div>
84+
<div class="window"></div>
85+
<div class="window"></div>
86+
<div class="window"></div>
87+
<div class="window"></div>
88+
<div class="window"></div>
89+
</div>
90+
</div>
91+
<div class="building b6">
92+
<div class="antenna"></div>
93+
<div class="windows">
94+
<div class="window"></div>
95+
<div class="window"></div>
96+
<div class="window"></div>
97+
<div class="window"></div>
98+
<div class="window"></div>
99+
<div class="window"></div>
100+
<div class="window"></div>
101+
<div class="window"></div>
102+
</div>
103+
</div>
104+
<div class="building b7">
105+
<div class="windows">
106+
<div class="window"></div>
107+
<div class="window"></div>
108+
<div class="window"></div>
109+
<div class="window"></div>
110+
<div class="window"></div>
111+
<div class="window"></div>
112+
<div class="window"></div>
113+
</div>
114+
</div>
115+
</div>
116+
117+
<!-- Signboard on the right side of buildings above the road -->
118+
<a href="#road" class="side-board" role="button" tabindex="0" aria-label="View road scene">
119+
<div class="sb-title">CITY BOARD</div>
120+
<div class="sb-line">Traffic Live</div>
121+
<div class="sb-line small">Click to view road</div>
122+
</a>
123+
124+
<div class="ground"></div>
125+
126+
<div class="info">
127+
<h1>🌃 Night City</h1>
128+
<p>Pure CSS Animation</p>
129+
<p class="subtitle">No JavaScript Required</p>
130+
<div class="controls">
131+
<!-- left display removed per request -->
132+
</div>
133+
</div>
134+
</div>
135+
136+
<!-- Scene: Road with moving cars -->
137+
<div id="road" class="scene scene--road">
138+
<div class="road-scene">
139+
<div class="sky road-sky"></div>
140+
<div class="road">
141+
<!-- Background Buildings -->
142+
<div class="background-buildings">
143+
<div class="bg-building b1"></div>
144+
<div class="bg-building b2"></div>
145+
<div class="bg-building b3"></div>
146+
<div class="bg-building b4"></div>
147+
<div class="bg-building b5"></div>
148+
</div>
149+
150+
<!-- Lamp Posts -->
151+
<div class="lamp-posts">
152+
<div class="lamp-post l1">
153+
<div class="post"></div>
154+
<div class="light"></div>
155+
</div>
156+
<div class="lamp-post l2">
157+
<div class="post"></div>
158+
<div class="light"></div>
159+
</div>
160+
<div class="lamp-post l3">
161+
<div class="post"></div>
162+
<div class="light"></div>
163+
</div>
164+
<div class="lamp-post l4">
165+
<div class="post"></div>
166+
<div class="light"></div>
167+
</div>
168+
</div>
169+
170+
<!-- Street Signs -->
171+
<div class="street-signs">
172+
<div class="sign s1">SPEED<br>LIMIT<br>60</div>
173+
<div class="sign s2">NIGHT<br>CITY<br>→</div>
174+
</div>
175+
176+
<div class="lane"></div>
177+
178+
<!-- Vehicle: small car -->
179+
<div class="vehicle car car-1">
180+
<div class="body"></div>
181+
<div class="wheel front"></div>
182+
<div class="wheel back"></div>
183+
<div class="headlight left"></div>
184+
<div class="headlight right"></div>
185+
<div class="taillight left"></div>
186+
<div class="taillight right"></div>
187+
</div>
188+
189+
<!-- Vehicle: bike (small, nimble) -->
190+
<div class="vehicle bike bike-1">
191+
<div class="body"></div>
192+
<div class="wheel front"></div>
193+
<div class="wheel back"></div>
194+
<div class="headlight"></div>
195+
</div>
196+
197+
<!-- Vehicle: medium car (opposite direction) -->
198+
<div class="vehicle car car-2">
199+
<div class="body"></div>
200+
<div class="wheel front"></div>
201+
<div class="wheel back"></div>
202+
<div class="headlight left"></div>
203+
<div class="headlight right"></div>
204+
<div class="taillight left"></div>
205+
<div class="taillight right"></div>
206+
</div>
207+
208+
<!-- Vehicle: bus (large, slower) -->
209+
<div class="vehicle bus bus-1">
210+
<div class="body"></div>
211+
<div class="wheel front"></div>
212+
<div class="wheel back"></div>
213+
<div class="headlight left"></div>
214+
<div class="headlight right"></div>
215+
<div class="taillight left"></div>
216+
<div class="taillight right"></div>
217+
</div>
218+
219+
<!-- Vehicle: larger car -->
220+
<div class="vehicle car car-3">
221+
<div class="body"></div>
222+
<div class="wheel front"></div>
223+
<div class="wheel back"></div>
224+
<div class="headlight left"></div>
225+
<div class="headlight right"></div>
226+
<div class="taillight left"></div>
227+
<div class="taillight right"></div>
228+
</div>
229+
230+
<!-- Vehicle: bike (opposite) -->
231+
<div class="vehicle bike bike-2">
232+
<div class="body"></div>
233+
<div class="wheel front"></div>
234+
<div class="wheel back"></div>
235+
<div class="headlight"></div>
236+
</div>
237+
<!-- Road signboard to go back to the city scene -->
238+
<a href="#city" class="road-board" role="button" tabindex="0" aria-label="Back to city scene">
239+
<div class="rb-line">Back to City</div>
240+
</a>
241+
</div>
242+
</div>
243+
</div>
244+
</body>
245+
</html>

‎Night City/preview1.png‎

848 KB
Loading

‎Night City/preview2.png‎

101 KB
Loading

0 commit comments

Comments
 (0)