194 lines
12 KiB
HTML
194 lines
12 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-TW">
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>SECHSKIES - 水晶男孩傳奇介紹</title>
|
||
<link rel="stylesheet" href="style.css">
|
||
<link rel="stylesheet" href="index.css">
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
|
||
<link rel="stylesheet" href="tablet.css">
|
||
|
||
</head>
|
||
|
||
<body class="home-page">
|
||
<header id="origin">
|
||
<div class="hero">
|
||
<h1>SECHSKIES<br>水晶男孩</h1>
|
||
<p>六顆永恆的水晶 • 左右命運的傳奇</p>
|
||
<a href="#start" class="btn">從這裡開始淪陷</a>
|
||
</div>
|
||
</header>
|
||
|
||
<nav class="portal-nav" aria-label="水晶男孩推廣部導覽" data-portal-nav></nav>
|
||
|
||
<canvas id="particles"></canvas>
|
||
|
||
<div class="container">
|
||
|
||
<section id="start">
|
||
<h2 class="section-title">好奇的開端</h2>
|
||
<div class="intro-text">
|
||
<p class="intro-text">
|
||
身為在回歸後才被這場 <span class="mark_b mark_y">「黃色奇蹟」</span>
|
||
擊中的新一代粉絲，我深刻體會那種從好奇觀看到最終徹底淪陷的悸動。
|
||
</p>
|
||
<p class="core-description">
|
||
這段旅程始於 2016 年 4 月，透過國民綜藝<span class="mark_b mark_y">《無限挑戰》</span>的回歸企劃，讓原本不認識這組傳奇的我，因一時好奇點開節目。
|
||
即便錯過了那個屬於他們的世紀末，但跟著節目的編排鋪陳，從歡笑到感動，我依然被那份熱血、真誠且專業的魅力所震撼。
|
||
</p>
|
||
<p class="call-to-action">
|
||
對我來說，經典不是博物館的玻璃櫃，而是每次重播都讓人想跟著跳的節奏。這種從路人轉化為深陷其中的過程，證明了魅力可以跨越時間，也正是這一切好奇的起點。
|
||
</p>
|
||
</div>
|
||
</section>
|
||
<section id="mission" class="mission-section">
|
||
<div class="mission-zigzag">
|
||
<div class="mission-row mission-row--intro">
|
||
<div class="mission-row__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 class="mission-row__body">
|
||
<h2 class="section-title mission-block-title">成立的初衷</h2>
|
||
<p class="mission-lead">
|
||
以推廣 <span class="mark_b mark_y">SECHSKIES 水晶男孩</span> 為核心，旨在透過 <span
|
||
class="mark_b">專業的視覺策展</span> 宣傳成員魅力與 <span
|
||
class="mark_b">小黃們的應援活動</span>。我們不滿足於傳統的追星模式，而是嘗試以水晶男孩為 <span class="mark_b">靈感主軸</span>，延伸至
|
||
<span class="mark_b">網頁開發、視覺設計與內容企劃</span>
|
||
等多重領域，將對偶像的喜愛轉化為 <span class="mark_b">實質的專業養分</span>。在這裡，你不只能探索他們的 <span
|
||
class="mark_b">傳奇軌跡</span>，更能見證追星如何激發 <span class="mark_b">創作潛能</span>。
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mission-row mission-row--concept">
|
||
<div class="mission-row__body">
|
||
<h3 class="mission-logo-heading">LOGO 設計理念</h3>
|
||
<p>
|
||
<span class="mark_b">「晶」</span>字發想來自<span class="mark_b">六角形的水晶</span>，為了強調水晶男孩<span
|
||
class="mark_b">初心為六人</span>。上半部形似<span class="mark_b">數字
|
||
6</span>，搭配演唱會必備的<span class="mark_b">手燈圖案</span>，代表粉絲和水晶<span
|
||
class="mark_b">密不可分的關係</span>。<br>色彩配置發想來自回歸舞台成員脫下眼罩的剎那，整個場地從<span
|
||
class="mark_b mark_y">一片漆黑瞬間發亮</span>，映入眼簾的是一片<span
|
||
class="mark_b">黃色海洋</span>。以此片段為契機，設計成<span
|
||
class="mark_b">黑色系與黃色系</span>的色彩搭配，來記錄那瞬間的感動。
|
||
</p>
|
||
</div>
|
||
<div class="mission-row__visual">
|
||
<div class="mission-moment-wrap">
|
||
<div class="mission-gif-frame" role="group" aria-label="回歸演唱會／黃色氣球海（16：9）">
|
||
<!-- 若改為 GIF 動圖，將底下 src 換成 ./img/mission-balloon-sea.gif 即可 -->
|
||
<img src="./img/黃色海洋.gif" alt="無限挑戰 六六歌2 放送畫面：全場黃色氣球海">
|
||
</div>
|
||
<span class="caption">
|
||
<span class="arrow-icon" aria-hidden="true">↑</span>
|
||
回歸演唱會的動人瞬間-黃色氣球海
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="slogan-quote slogan-quote--mission">
|
||
<span class="slogan-quote__inner">我們要用這座<span class="mark_b">藝廊般的網站</span>證明：<br>追星的孩子不僅不會變壞，更會因為那份<span
|
||
class="mark_b">守護的熱情</span>，<br>讓現在的自己變得比追星前的自己還要厲害!</span>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="timeline" class="story-archive">
|
||
<h2 class="section-title">跨時空軌跡</h2>
|
||
<div class="subtitle-wrap">
|
||
<span class="sub-title">SECHSKIES STORY ARCHIVE</span>
|
||
</div>
|
||
|
||
<div class="merged-storyline">
|
||
<article class="story-node" data-era="1997">
|
||
<h3>傳奇的誕生：出道與巔峰</h3>
|
||
<p>1997年4月15日，水晶男孩以《學園別曲》正式出道，是韓國第一代偶像團體，與H.O.T.並稱為90年代後期兩大山脈。團名源自德語「六顆水晶」，象徵六位成員能左右命運。</p>
|
||
<p>分為「黑水晶」（殷志源、李宰鎮、金在德 — Rap與舞蹈）和「白水晶」（姜成勳、高志溶、張水院 — 主唱）。</p>
|
||
</article>
|
||
|
||
<article class="story-node" data-era="2000">
|
||
<h3>遺憾的句點：宣告解散</h3>
|
||
<p>2000年5月20日正式解散，成員各自發展，水晶暫時進入休眠期。</p>
|
||
</article>
|
||
|
||
<article class="story-node story-node--ebook-ssg2" data-era="2016">
|
||
<h3>傳奇回歸：重逢的感動合體</h3>
|
||
<p>透過《無限挑戰》「六六歌2」跨越16年再次重聚，引起全韓黃色氣球海再現。</p>
|
||
<a href="extra/totoga2.html#ebook" class="timeline-ebook-cta">
|
||
<i class="fa-solid fa-hand-pointer" aria-hidden="true"></i>
|
||
<span>點這裡翻開《六六歌2》紀實電子書</span>
|
||
</a>
|
||
</article>
|
||
|
||
<article class="story-node" data-era="2019">
|
||
<h3>體制調整與穩定</h3>
|
||
<p>調整為四人組合（殷志源、李宰鎮、金在德、張水院），繼續以經典魅力活躍於樂壇與綜藝。</p>
|
||
</article>
|
||
|
||
<article class="story-node" data-era="NOW">
|
||
<h3>至今：個人與團體並行</h3>
|
||
<p>隊長殷志源活躍於各類綜藝節目，成員們也積極參與音樂與個人品牌活動。雖然活動節奏放緩，但水晶男孩仍是 K-POP 史上的長壽標竿。</p>
|
||
</article>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="story" class="story-archive">
|
||
<h2 class="section-title">傳奇的轉折</h2>
|
||
<div class="subtitle-wrap">
|
||
<span class="sub-title">PLOT TWIST</span>
|
||
</div>
|
||
<p class="intro-text">
|
||
像劇情的反轉一樣過癮：這幾個節點，剛好是許多人從「旁觀綜藝」滑進「正式入坑」的轉軌。若想讀對白級細節，請開
|
||
<a href="extra/totoga2.html">六六歌2 整合專區</a>（影片／電子書／紀實長文八章，同一頁切換模式即可）。
|
||
</p>
|
||
<div class="story-ebook-cta">
|
||
<a href="extra/totoga2.html#ebook" class="btn story-ebook-btn">開啟六六歌2 紀實電子書</a>
|
||
<a href="extra/totoga2.html" class="btn story-ebook-btn">六六歌2 整合專區</a>
|
||
</div>
|
||
|
||
<div class="merged-storyline">
|
||
<article id="special" class="story-node" data-era="六六歌">
|
||
<h3>六六歌實錄</h3>
|
||
<p>把懸念、試探與哭點縫在同一條時間軸上；很多人第一次真正把「水晶男孩」打進搜尋框，就是從這種瘋狂的剪輯節奏開始。</p>
|
||
<p><a href="extra/totoga2.html#ssg2">對照這一段幕後敘事</a></p>
|
||
</article>
|
||
<article id="negotiate" class="story-node" data-era="交涉">
|
||
<h3>命運的交涉</h3>
|
||
<p>KTV、游擊演唱會規則、與其說講道理不如說把真心擺上桌面——交涉的不是合約字面，而是還願不願意再一次肩並肩。</p>
|
||
<p><a href="extra/totoga2.html#negotiate">讀交涉與對話肌理</a></p>
|
||
</article>
|
||
<article id="complete" class="story-node" data-era="歸位">
|
||
<h3>拼圖的歸位</h3>
|
||
<p>變數一個個被排除之後，驚喜接上登場段落；缺一角舞台的視覺，終於對齊觀眾席上堅守的那片黃。</p>
|
||
<p><a href="extra/totoga2.html#gather">從「召集」段開始補這條線</a></p>
|
||
</article>
|
||
<article id="past" class="story-node" data-era="最初">
|
||
<h3>巔峰與雨天</h3>
|
||
<p>急凍、告別、各自的跑道——並不是要你沉浸遺憾，而是讓你懂：後來每一次亮燈，為什麼會更值得尖叫。</p>
|
||
<p><a href="extra/totoga2.html#sechskies-profile">讀這條脈絡的起點</a></p>
|
||
</article>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
|
||
<footer>
|
||
<p>SECHSKIES Fanpage © 2026 - 黃色氣球永遠飄揚</p>
|
||
<a href="https://jekkinoopy.github.io/Portfolio/" class="studio-link" target="_blank">
|
||
Design by <span class="mark_b">Jekkinoopy Studio</span>
|
||
</a>
|
||
</footer>
|
||
|
||
<script src="particles.js"></script>
|
||
<script src="portal-nav.js"></script>
|
||
</body>
|
||
|
||
</html> |