openfree commited on
Commit
3834abb
ยท
verified ยท
1 Parent(s): 9a8191f

Update index.html

Browse files
Files changed (1) hide show
  1. 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