style archive.html.lyrics.html
This commit is contained in:
+57
-31
@@ -67,14 +67,6 @@
|
||||
<canvas id="particles"></canvas>
|
||||
|
||||
<div class="container">
|
||||
<section id="mission">
|
||||
<h2 class="section-title">成立的初衷</h2>
|
||||
<div class="intro-text">
|
||||
<p class="intro-text">
|
||||
這裡先端出舞台上與綜藝裡最刺眼、也最誠實的魅力，接住每一次「怎麼又帥又好笑」的心跳；你越往深處挖，越容易聽懂那場 <span class="highlight">仍在續寫的傳奇</span>。
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="start">
|
||||
<h2 class="section-title">好奇的開端</h2>
|
||||
@@ -84,13 +76,45 @@
|
||||
</p>
|
||||
<p class="core-description">
|
||||
水晶男孩（SECHSKIES）的魔力在於：即便錯過他們第一次站上大型舞台的年代，依然會被他們 <span class="highlight">熱血、真誠且專業</span>
|
||||
的魅力所感動。這裡不僅是資訊站，更是由熱愛凝聚的空間。從台上的職人氣場，到台下像家人吵架又像互相撐腰的 <span class="highlight">反差</span>，把「現在入坑」變成一種完全被允許的日常。
|
||||
的魅力所感動。這裡不僅是資訊站，更是由熱愛凝聚的空間。從台上的職人氣場，到台下像家人吵架又像互相撐腰的 <span
|
||||
class="highlight">反差</span>，把「現在入坑」變成一種完全被允許的日常。
|
||||
</p>
|
||||
<p class="call-to-action">
|
||||
經典不是博物館的玻璃櫃，而是每次重播都讓人想跟著跳的節奏。加入我們，一起把手上的應援色舉高一點。
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
<section id="mission" class="mission-section">
|
||||
<h2 class="section-title">成立的初衷</h2>
|
||||
<div class="mission-layout">
|
||||
<div class="mission-content">
|
||||
<p>
|
||||
本站是以 <span class="highlight">SECHSKIES 水晶男孩</span> 為核心的數位推廣部，旨在透過 <span class="highlight">專業的視覺策展</span> 宣傳成員魅力與 <span class="highlight">小黃們的應援活動</span>。我們不滿足於傳統的追星模式，而是嘗試以水晶男孩為 <span class="highlight">靈感主軸</span>，延伸至 <span class="highlight">網頁開發、視覺設計與內容企劃</span> 等多重領域，將對偶像的喜愛轉化為 <span class="highlight">實質的專業養分</span>。在這裡，你不只能探索他們的 <span class="highlight">傳奇軌跡</span>，更能見證追星如何激發 <span class="highlight">創作潛能</span>。
|
||||
</p>
|
||||
|
||||
<div class="logo-concept">
|
||||
<h3>LOGO 設計理念</h3>
|
||||
<p>
|
||||
<span class="highlight">「晶」</span>字發想來自<span class="highlight">六角形的水晶</span>，為了強調水晶男孩<span class="highlight">初心為六人</span>。上半部形似<span class="highlight">數字 6</span>，搭配演唱會必備的<span class="highlight">手燈圖案</span>，代表粉絲和水晶<span class="highlight">密不可分的關係</span>。色彩配置發想來自回歸舞台成員脫下眼罩的剎那，整個場地從一片漆黑瞬間發亮，映入眼簾的是一片<span class="highlight">黃色海洋</span>。以此片段為契機，設計成<span class="highlight">黑色系與黃色系</span>的色彩搭配，來記錄那瞬間的感動。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mission-visual">
|
||||
<div class="logo-wrapper">
|
||||
<img src="./img/logo.png" alt="SECHSKIES Logo Concept">
|
||||
<span class="caption">
|
||||
<span class="arrow-icon" aria-hidden="true">↓</span>
|
||||
設計語彙：六角、黃海與初心
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="quote-box">
|
||||
「我們要用這座<span class="highlight">藝廊般的網站</span>證明：追星的孩子不僅不會變壞，更會因為那份<span class="highlight">守護的熱情</span>，讓現在的自己變得比追星前的自己還要厲害。」
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="timeline" class="story-archive">
|
||||
<h2 class="section-title">跨時空軌跡</h2>
|
||||
@@ -127,7 +151,7 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="story">
|
||||
<section id="story" class="story-archive">
|
||||
<h2 class="section-title">傳奇的轉折</h2>
|
||||
<div class="subtitle-wrap">
|
||||
<span class="sub-title">PLOT TWIST</span>
|
||||
@@ -137,26 +161,28 @@
|
||||
<a href="chronicle.html">開啟完整紀實篇章</a>
|
||||
</p>
|
||||
|
||||
<article id="special" class="story-node">
|
||||
<h3>六六歌實錄</h3>
|
||||
<p>把懸念、試探與哭點縫在同一條時間軸上；很多人第一次真正把「水晶男孩」打進搜尋框，就是從這種瘋狂的剪輯節奏開始。</p>
|
||||
<p><a href="chronicle.html#ssg2">對照這一段幕後敘事</a></p>
|
||||
</article>
|
||||
<article id="negotiate" class="story-node">
|
||||
<h3>命運的交涉</h3>
|
||||
<p>KTV、游擊演唱會規則、與其說講道理不如說把真心擺上桌面——交涉的不是合約字面，而是還願不願意再一次肩並肩。</p>
|
||||
<p><a href="chronicle.html#negotiate">讀交涉與對話肌理</a></p>
|
||||
</article>
|
||||
<article id="complete" class="story-node">
|
||||
<h3>拼圖的歸位</h3>
|
||||
<p>變數一個個被排除之後，驚喜接上登場段落；缺一角舞台的視覺，終於對齊觀眾席上堅守的那片黃。</p>
|
||||
<p><a href="chronicle.html#gather">從「召集」段開始補這條線</a></p>
|
||||
</article>
|
||||
<article id="past" class="story-node">
|
||||
<h3>巔峰與雨天</h3>
|
||||
<p>急凍、告別、各自的跑道——並不是要你沉浸遺憾，而是讓你懂：後來每一次亮燈，為什麼會更值得尖叫。</p>
|
||||
<p><a href="chronicle.html#sechskies-profile">讀這條脈絡的起點</a></p>
|
||||
</article>
|
||||
<div class="merged-storyline">
|
||||
<article id="special" class="story-node" data-era="六六歌">
|
||||
<h3>六六歌實錄</h3>
|
||||
<p>把懸念、試探與哭點縫在同一條時間軸上；很多人第一次真正把「水晶男孩」打進搜尋框，就是從這種瘋狂的剪輯節奏開始。</p>
|
||||
<p><a href="chronicle.html#ssg2">對照這一段幕後敘事</a></p>
|
||||
</article>
|
||||
<article id="negotiate" class="story-node" data-era="交涉">
|
||||
<h3>命運的交涉</h3>
|
||||
<p>KTV、游擊演唱會規則、與其說講道理不如說把真心擺上桌面——交涉的不是合約字面，而是還願不願意再一次肩並肩。</p>
|
||||
<p><a href="chronicle.html#negotiate">讀交涉與對話肌理</a></p>
|
||||
</article>
|
||||
<article id="complete" class="story-node" data-era="歸位">
|
||||
<h3>拼圖的歸位</h3>
|
||||
<p>變數一個個被排除之後，驚喜接上登場段落；缺一角舞台的視覺，終於對齊觀眾席上堅守的那片黃。</p>
|
||||
<p><a href="chronicle.html#gather">從「召集」段開始補這條線</a></p>
|
||||
</article>
|
||||
<article id="past" class="story-node" data-era="最初">
|
||||
<h3>巔峰與雨天</h3>
|
||||
<p>急凍、告別、各自的跑道——並不是要你沉浸遺憾，而是讓你懂：後來每一次亮燈，為什麼會更值得尖叫。</p>
|
||||
<p><a href="chronicle.html#sechskies-profile">讀這條脈絡的起點</a></p>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
@@ -171,4 +197,4 @@
|
||||
<script src="portal-nav.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
</html>
|
||||
Reference in New Issue
Block a user