Skip to content

Commit 9ddd1a7

Browse files
captainbrossetcaptainbrosset
committed
cars demo
1 parent f90c8b8 commit 9ddd1a7

File tree

11 files changed

+207
-0
lines changed

11 files changed

+207
-0
lines changed

‎css-masonry/cars.html

Lines changed: 207 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,207 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Cars</title>
8+
<style>
9+
:root {
10+
--traffic-density: 200px;
11+
}
12+
13+
html,
14+
body {
15+
height: 100%;
16+
margin: 0;
17+
overflow: hidden;
18+
}
19+
20+
body {
21+
background: url(cars/grass.jpg);
22+
}
23+
24+
.road {
25+
display: masonry;
26+
grid-template-columns: repeat(5, 50px);
27+
gap: var(--traffic-density) 20px;
28+
width: 350px;
29+
height: 100%;
30+
overflow-y: scroll;
31+
overflow-x: hidden;
32+
margin: 0 auto;
33+
background-color: #ddd;
34+
background-image: linear-gradient(to right, #ddd 0 67px, transparent 0), linear-gradient(to bottom, #ffffff 0 50px, transparent 50px 100px);
35+
background-size: 70px 100%, 3px 100px;
36+
background-position: -10px 0, 70px 0;
37+
background-attachment: local, fixed;
38+
border: 8px solid #525252;
39+
border-width: 0 8px;
40+
}
41+
42+
.car:nth-child(2n) {
43+
margin-block-start: 100px;
44+
}
45+
46+
.car:nth-child(5n) {
47+
margin-block-end: 50px;
48+
}
49+
50+
.car img {
51+
width: 100%;
52+
mix-blend-mode: multiply;
53+
}
54+
</style>
55+
</head>
56+
57+
<body>
58+
<main class="road">
59+
<div class="car"><img src="cars/car9.png"></div>
60+
<div class="car"><img src="cars/car1.png"></div>
61+
<div class="car"><img src="cars/car5.png"></div>
62+
<div class="car"><img src="cars/car6.png"></div>
63+
<div class="car"><img src="cars/car7.png"></div>
64+
<div class="car"><img src="cars/car8.png"></div>
65+
<div class="car"><img src="cars/car9.png"></div>
66+
<div class="car"><img src="cars/car2.png"></div>
67+
<div class="car"><img src="cars/car5.png"></div>
68+
<div class="car"><img src="cars/car7.png"></div>
69+
<div class="car"><img src="cars/car3.png"></div>
70+
<div class="car"><img src="cars/car9.png"></div>
71+
<div class="car"><img src="cars/car2.png"></div>
72+
<div class="car"><img src="cars/car3.png"></div>
73+
<div class="car"><img src="cars/car4.png"></div>
74+
<div class="car"><img src="cars/car8.png"></div>
75+
<div class="car"><img src="cars/car9.png"></div>
76+
<div class="car"><img src="cars/car2.png"></div>
77+
<div class="car"><img src="cars/car5.png"></div>
78+
<div class="car"><img src="cars/car7.png"></div>
79+
<div class="car"><img src="cars/car3.png"></div>
80+
<div class="car"><img src="cars/car5.png"></div>
81+
<div class="car"><img src="cars/car6.png"></div>
82+
<div class="car"><img src="cars/car7.png"></div>
83+
<div class="car"><img src="cars/car9.png"></div>
84+
<div class="car"><img src="cars/car1.png"></div>
85+
<div class="car"><img src="cars/car4.png"></div>
86+
<div class="car"><img src="cars/car8.png"></div>
87+
<div class="car"><img src="cars/car3.png"></div>
88+
<div class="car"><img src="cars/car2.png"></div>
89+
<div class="car"><img src="cars/car2.png"></div>
90+
<div class="car"><img src="cars/car6.png"></div>
91+
<div class="car"><img src="cars/car8.png"></div>
92+
<div class="car"><img src="cars/car7.png"></div>
93+
<div class="car"><img src="cars/car2.png"></div>
94+
<div class="car"><img src="cars/car6.png"></div>
95+
<div class="car"><img src="cars/car8.png"></div>
96+
<div class="car"><img src="cars/car9.png"></div>
97+
<div class="car"><img src="cars/car3.png"></div>
98+
<div class="car"><img src="cars/car4.png"></div>
99+
<div class="car"><img src="cars/car6.png"></div>
100+
<div class="car"><img src="cars/car5.png"></div>
101+
<div class="car"><img src="cars/car6.png"></div>
102+
<div class="car"><img src="cars/car7.png"></div>
103+
<div class="car"><img src="cars/car3.png"></div>
104+
<div class="car"><img src="cars/car1.png"></div>
105+
<div class="car"><img src="cars/car2.png"></div>
106+
<div class="car"><img src="cars/car9.png"></div>
107+
<div class="car"><img src="cars/car7.png"></div>
108+
<div class="car"><img src="cars/car7.png"></div>
109+
<div class="car"><img src="cars/car2.png"></div>
110+
<div class="car"><img src="cars/car6.png"></div>
111+
<div class="car"><img src="cars/car8.png"></div>
112+
<div class="car"><img src="cars/car9.png"></div>
113+
<div class="car"><img src="cars/car7.png"></div>
114+
<div class="car"><img src="cars/car3.png"></div>
115+
<div class="car"><img src="cars/car1.png"></div>
116+
<div class="car"><img src="cars/car2.png"></div>
117+
<div class="car"><img src="cars/car9.png"></div>
118+
<div class="car"><img src="cars/car3.png"></div>
119+
<div class="car"><img src="cars/car4.png"></div>
120+
<div class="car"><img src="cars/car5.png"></div>
121+
<div class="car"><img src="cars/car3.png"></div>
122+
<div class="car"><img src="cars/car6.png"></div>
123+
<div class="car"><img src="cars/car8.png"></div>
124+
<div class="car"><img src="cars/car3.png"></div>
125+
<div class="car"><img src="cars/car2.png"></div>
126+
<div class="car"><img src="cars/car2.png"></div>
127+
<div class="car"><img src="cars/car6.png"></div>
128+
<div class="car"><img src="cars/car8.png"></div>
129+
<div class="car"><img src="cars/car9.png"></div>
130+
<div class="car"><img src="cars/car3.png"></div>
131+
<div class="car"><img src="cars/car4.png"></div>
132+
<div class="car"><img src="cars/car9.png"></div>
133+
<div class="car"><img src="cars/car1.png"></div>
134+
<div class="car"><img src="cars/car5.png"></div>
135+
<div class="car"><img src="cars/car6.png"></div>
136+
<div class="car"><img src="cars/car7.png"></div>
137+
<div class="car"><img src="cars/car8.png"></div>
138+
<div class="car"><img src="cars/car9.png"></div>
139+
<div class="car"><img src="cars/car2.png"></div>
140+
<div class="car"><img src="cars/car5.png"></div>
141+
<div class="car"><img src="cars/car7.png"></div>
142+
<div class="car"><img src="cars/car3.png"></div>
143+
<div class="car"><img src="cars/car9.png"></div>
144+
<div class="car"><img src="cars/car2.png"></div>
145+
<div class="car"><img src="cars/car3.png"></div>
146+
<div class="car"><img src="cars/car4.png"></div>
147+
<div class="car"><img src="cars/car8.png"></div>
148+
<div class="car"><img src="cars/car9.png"></div>
149+
<div class="car"><img src="cars/car2.png"></div>
150+
<div class="car"><img src="cars/car5.png"></div>
151+
<div class="car"><img src="cars/car7.png"></div>
152+
<div class="car"><img src="cars/car3.png"></div>
153+
<div class="car"><img src="cars/car5.png"></div>
154+
<div class="car"><img src="cars/car6.png"></div>
155+
<div class="car"><img src="cars/car7.png"></div>
156+
<div class="car"><img src="cars/car9.png"></div>
157+
<div class="car"><img src="cars/car1.png"></div>
158+
<div class="car"><img src="cars/car4.png"></div>
159+
<div class="car"><img src="cars/car8.png"></div>
160+
<div class="car"><img src="cars/car3.png"></div>
161+
<div class="car"><img src="cars/car2.png"></div>
162+
<div class="car"><img src="cars/car2.png"></div>
163+
<div class="car"><img src="cars/car6.png"></div>
164+
<div class="car"><img src="cars/car8.png"></div>
165+
<div class="car"><img src="cars/car7.png"></div>
166+
<div class="car"><img src="cars/car2.png"></div>
167+
<div class="car"><img src="cars/car6.png"></div>
168+
<div class="car"><img src="cars/car8.png"></div>
169+
<div class="car"><img src="cars/car9.png"></div>
170+
<div class="car"><img src="cars/car3.png"></div>
171+
<div class="car"><img src="cars/car4.png"></div>
172+
<div class="car"><img src="cars/car6.png"></div>
173+
<div class="car"><img src="cars/car5.png"></div>
174+
<div class="car"><img src="cars/car6.png"></div>
175+
<div class="car"><img src="cars/car7.png"></div>
176+
<div class="car"><img src="cars/car3.png"></div>
177+
<div class="car"><img src="cars/car1.png"></div>
178+
<div class="car"><img src="cars/car2.png"></div>
179+
<div class="car"><img src="cars/car9.png"></div>
180+
<div class="car"><img src="cars/car7.png"></div>
181+
<div class="car"><img src="cars/car7.png"></div>
182+
<div class="car"><img src="cars/car2.png"></div>
183+
<div class="car"><img src="cars/car6.png"></div>
184+
<div class="car"><img src="cars/car8.png"></div>
185+
<div class="car"><img src="cars/car9.png"></div>
186+
<div class="car"><img src="cars/car7.png"></div>
187+
<div class="car"><img src="cars/car3.png"></div>
188+
<div class="car"><img src="cars/car1.png"></div>
189+
<div class="car"><img src="cars/car2.png"></div>
190+
<div class="car"><img src="cars/car9.png"></div>
191+
<div class="car"><img src="cars/car3.png"></div>
192+
<div class="car"><img src="cars/car4.png"></div>
193+
<div class="car"><img src="cars/car5.png"></div>
194+
<div class="car"><img src="cars/car3.png"></div>
195+
<div class="car"><img src="cars/car6.png"></div>
196+
<div class="car"><img src="cars/car8.png"></div>
197+
<div class="car"><img src="cars/car3.png"></div>
198+
<div class="car"><img src="cars/car2.png"></div>
199+
<div class="car"><img src="cars/car2.png"></div>
200+
<div class="car"><img src="cars/car6.png"></div>
201+
<div class="car"><img src="cars/car8.png"></div>
202+
<div class="car"><img src="cars/car9.png"></div>
203+
<div class="car"><img src="cars/car3.png"></div>
204+
</main>
205+
</body>
206+
207+
</html>

‎css-masonry/cars/car1.png

12.4 KB
Loading

‎css-masonry/cars/car2.png

9.59 KB
Loading

‎css-masonry/cars/car3.png

9.38 KB
Loading

‎css-masonry/cars/car4.png

8.39 KB
Loading

‎css-masonry/cars/car5.png

9.07 KB
Loading

‎css-masonry/cars/car6.png

9.57 KB
Loading

‎css-masonry/cars/car7.png

11.8 KB
Loading

‎css-masonry/cars/car8.png

10.2 KB
Loading

‎css-masonry/cars/car9.png

11 KB
Loading

0 commit comments

Comments
 (0)