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 |
|