Spaces:
Running
Running
Update index.html
Browse files- index.html +6 -11
index.html
CHANGED
@@ -15,14 +15,12 @@
|
|
15 |
|
16 |
.timeline-container {
|
17 |
width: 100%;
|
18 |
-
/* ๊ทธ๋ฆฌ๋ ๋ฐฐ์น๋ฅผ ์ํด ๊ฐ๋ก ์คํฌ๋กค ์ ๊ฑฐ */
|
19 |
overflow-x: hidden;
|
20 |
overflow-y: hidden;
|
21 |
padding: 20px;
|
22 |
box-sizing: border-box;
|
23 |
}
|
24 |
|
25 |
-
/* 4์ด ๊ทธ๋ฆฌ๋ */
|
26 |
.timeline {
|
27 |
display: grid;
|
28 |
grid-template-columns: repeat(4, 1fr);
|
@@ -38,17 +36,17 @@
|
|
38 |
transition: all 0.3s ease;
|
39 |
}
|
40 |
|
41 |
-
/* BEST ์นด๋
|
42 |
.event:has(.tag.best) {
|
43 |
-
background-color: #fff8e1;
|
44 |
border-left: 4px solid #ffd700;
|
45 |
}
|
46 |
-
/* NEW ์นด๋
|
47 |
.event:has(.tag.new) {
|
48 |
-
background-color: #fce4ec;
|
49 |
border-left: 4px solid #ff4081;
|
50 |
}
|
51 |
-
/* POPULAR ์นด๋
|
52 |
.event:has(.tag.popular) {
|
53 |
background-color: #fff3e0; /* ์ฐํ ์ฃผํฉ */
|
54 |
border-left: 4px solid #ffa500;
|
@@ -87,7 +85,6 @@
|
|
87 |
background-color: #FF4081;
|
88 |
color: white;
|
89 |
}
|
90 |
-
/* POPULAR ํ๊ทธ ์คํ์ผ */
|
91 |
.tag.popular {
|
92 |
background-color: #ffa500;
|
93 |
color: black;
|
@@ -109,6 +106,7 @@
|
|
109 |
color: #4caf50;
|
110 |
text-decoration: none;
|
111 |
}
|
|
|
112 |
.event p a:hover {
|
113 |
text-decoration: underline;
|
114 |
}
|
@@ -222,7 +220,6 @@
|
|
222 |
|
223 |
<div class="filter-group">
|
224 |
<div class="toggle-container">
|
225 |
-
<!-- ์๋ ์๋ BEST, NEW์ POPULAR ์ถ๊ฐ -->
|
226 |
<button class="toggle-button active" data-filter="all">All Models</button>
|
227 |
<button class="toggle-button" data-filter="best">BEST</button>
|
228 |
<button class="toggle-button" data-filter="new">NEW</button>
|
@@ -243,7 +240,6 @@
|
|
243 |
</div>
|
244 |
|
245 |
<div class="counter-container">
|
246 |
-
<!-- POPULAR ์นด์ดํฐ ์ถ๊ฐ -->
|
247 |
<span class="counter-item">
|
248 |
<span id="best-count">0</span> BEST
|
249 |
</span>
|
@@ -259,7 +255,6 @@
|
|
259 |
|
260 |
<h2 class="section-title">Latest Models</h2>
|
261 |
|
262 |
-
|
263 |
<div class="timeline-container">
|
264 |
<div class="timeline">
|
265 |
|
|
|
15 |
|
16 |
.timeline-container {
|
17 |
width: 100%;
|
|
|
18 |
overflow-x: hidden;
|
19 |
overflow-y: hidden;
|
20 |
padding: 20px;
|
21 |
box-sizing: border-box;
|
22 |
}
|
23 |
|
|
|
24 |
.timeline {
|
25 |
display: grid;
|
26 |
grid-template-columns: repeat(4, 1fr);
|
|
|
36 |
transition: all 0.3s ease;
|
37 |
}
|
38 |
|
39 |
+
/* BEST ํ๊ทธ๊ฐ ์๋ ์นด๋ */
|
40 |
.event:has(.tag.best) {
|
41 |
+
background-color: #fff8e1;
|
42 |
border-left: 4px solid #ffd700;
|
43 |
}
|
44 |
+
/* NEW ํ๊ทธ๊ฐ ์๋ ์นด๋ */
|
45 |
.event:has(.tag.new) {
|
46 |
+
background-color: #fce4ec;
|
47 |
border-left: 4px solid #ff4081;
|
48 |
}
|
49 |
+
/* POPULAR ํ๊ทธ๊ฐ ์๋ ์นด๋ */
|
50 |
.event:has(.tag.popular) {
|
51 |
background-color: #fff3e0; /* ์ฐํ ์ฃผํฉ */
|
52 |
border-left: 4px solid #ffa500;
|
|
|
85 |
background-color: #FF4081;
|
86 |
color: white;
|
87 |
}
|
|
|
88 |
.tag.popular {
|
89 |
background-color: #ffa500;
|
90 |
color: black;
|
|
|
106 |
color: #4caf50;
|
107 |
text-decoration: none;
|
108 |
}
|
109 |
+
|
110 |
.event p a:hover {
|
111 |
text-decoration: underline;
|
112 |
}
|
|
|
220 |
|
221 |
<div class="filter-group">
|
222 |
<div class="toggle-container">
|
|
|
223 |
<button class="toggle-button active" data-filter="all">All Models</button>
|
224 |
<button class="toggle-button" data-filter="best">BEST</button>
|
225 |
<button class="toggle-button" data-filter="new">NEW</button>
|
|
|
240 |
</div>
|
241 |
|
242 |
<div class="counter-container">
|
|
|
243 |
<span class="counter-item">
|
244 |
<span id="best-count">0</span> BEST
|
245 |
</span>
|
|
|
255 |
|
256 |
<h2 class="section-title">Latest Models</h2>
|
257 |
|
|
|
258 |
<div class="timeline-container">
|
259 |
<div class="timeline">
|
260 |
|