Merge branch 'main' of https://github.com/jekkinoopy/sechskies
This commit is contained in:
File diff suppressed because it is too large
Load Diff
-236
@@ -1,236 +0,0 @@
|
|||||||
<!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="assets/css/style.css">
|
|
||||||
<link rel="stylesheet" href="assets/css/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="assets/css/tablet.css">
|
|
||||||
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body class="home-page">
|
|
||||||
<header id="origin">
|
|
||||||
<div class="hero">
|
|
||||||
<h1>SECHSKIES<br>水晶男孩</h1>
|
|
||||||
<div class="subtitle-wrap">
|
|
||||||
<span class="sub-title">六顆永恆的水晶 • 左右命運的傳奇</span>
|
|
||||||
</div>
|
|
||||||
<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="core-description">
|
|
||||||
這段旅程始於 2016 年 4 月，透過國民綜藝<span class="mark_b mark_y">《無限挑戰》</span>的回歸企劃，讓原本不認識這組傳奇的我，因一時好奇點開節目。
|
|
||||||
即便錯過了那個屬於他們的世紀末，但跟著節目的編排鋪陳，從歡笑到感動，我被這些熱血、真誠且專業的大男孩所震撼。
|
|
||||||
</p>
|
|
||||||
<p class="call-to-action">
|
|
||||||
身為在回歸後才被這場 <span class="mark_b mark_y">「黃色奇蹟」</span>
|
|
||||||
擊中的新一代粉絲，我深刻體會那種從好奇觀看到最終徹底淪陷的悸動。這種從<span class="mark_b"><span class="fan-journey-wave"
|
|
||||||
role="text">路人 <i class="fa-solid fa-circle-right"
|
|
||||||
aria-hidden="true"></i> 入坑否定期 <i class="fa-solid fa-circle-right"
|
|
||||||
aria-hidden="true"></i> 瘋狂考古期 <i class="fa-solid fa-circle-right"
|
|
||||||
aria-hidden="true"></i> 坑底躺平深陷其中</span></span>的過程，證明了魅力可以跨越時間，也正是這一切自我覺醒的起點，驅動我不斷進化的無限可能。
|
|
||||||
</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="./assets/images/logo.png" alt="SECHSKIES Logo Concept">
|
|
||||||
<div class="caption">
|
|
||||||
<span class="caption__line caption__line--title"><span class="arrow-icon mark_b"
|
|
||||||
aria-hidden="true">↑</span>設計概念：</span>
|
|
||||||
<span class="caption__line">六角形水晶、黃色海洋與我們的初心Six</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="mission-row__body">
|
|
||||||
<h2 class="section-title mission-block-title">成立的初衷</h2>
|
|
||||||
<p class="mission-lead">
|
|
||||||
以推廣 SECHSKIES <span class="mark_y">水晶男孩</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 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>
|
|
||||||
</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_y">讓成員和粉絲的世界跟著亮了起來</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 換成 ./assets/images/mission-balloon-sea.gif 即可 -->
|
|
||||||
<img src="./assets/images/黃色海洋.gif" alt="無限挑戰 六六歌2 放送畫面：全場黃色氣球海">
|
|
||||||
</div>
|
|
||||||
<span class="caption">
|
|
||||||
<span class="arrow-icon" aria-hidden="true">↑</span>
|
|
||||||
回歸演唱會的動人瞬間-黃色氣球海
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</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日，水晶男孩以強悍的《學園別曲》為起點，「黑水晶｜Rap與舞蹈」、「白水晶｜主唱」的雙色魅力交織，奠定了
|
|
||||||
K-POP第一代傳奇的地位，開創了屬於黃色海洋的盛世與巔峰。</p>
|
|
||||||
<p>在那段被韓劇<a
|
|
||||||
href="https://www.disneyplus.com/browse/entity-3979fb82-8681-44e8-b7be-e313091f0d73?distributionPartner=google"
|
|
||||||
class="story-external-inline" target="_blank" rel="noopener noreferrer"><span
|
|
||||||
class="story-external-inline__label">《請回答1997》</span><i
|
|
||||||
class="fa-solid fa-arrow-up-right-from-square" aria-hidden="true"></i></a>奉為經典的歲月裡，水晶男孩與
|
|
||||||
H.O.T.
|
|
||||||
並稱為兩大巔峰。無論是雨中那場被劇集致敬的粉絲大戰，還是為了買票露宿街頭的狂熱，白與黃的旗幟對決，成了那個世代集體記憶的起點。</p>
|
|
||||||
</article>
|
|
||||||
|
|
||||||
<article class="story-node" data-era="2000">
|
|
||||||
<h3>遺憾的休止符：凍結有你的世界</h3>
|
|
||||||
<p>在最燦爛的時刻，這首華麗的樂章卻被迫畫下了休止符，2000年5月正式解散。成員各自發展走出了不同道路，水晶進入休眠期。
|
|
||||||
</p>
|
|
||||||
<p>那一場如同劇中描寫般、讓全韓無數少女世界崩塌的夢想演唱會告別現場，將未完的旋律封存在冷冽的空氣中。這一停頓，就是長達十六年的靜默，成為我們心中最完整、卻也最令人心碎的凝煉模樣。
|
|
||||||
</p>
|
|
||||||
</article>
|
|
||||||
<article class="story-node story-node--ebook-ssg2" data-era="2016">
|
|
||||||
<h3>感動合體：那一晚，我們找回了完整</h3>
|
|
||||||
<p>塵封十六年的時光被溫柔拂去，跨越六千多天的等待，黃色氣球海再次淹沒了上岩運動場。當六個身影重新站在一起，那幅曾被凍結在 2000
|
|
||||||
年的畫面終於再次「溶解」並重合。那一晚，淚水證明了奇蹟真的存在，我們終於找回了那份久違的完整，以為故事從此能圓滿續寫。</p>
|
|
||||||
<span class="timeline-ebook-cta" aria-label="傳奇書寫中，連結暫停">
|
|
||||||
<span>點我見證傳奇</span><i class="fa-solid fa-hand-pointer" aria-hidden="true"></i>
|
|
||||||
</span>
|
|
||||||
</article>
|
|
||||||
<!-- 2016 年後續發展與情感轉折區塊 -->
|
|
||||||
<article class="story-node" data-era="2016.05">
|
|
||||||
<h3>從路人到鐵粉：從夢境進現實</h3>
|
|
||||||
|
|
||||||
<p>《無限挑戰》落幕後，原本以為這只是最後一場華麗的告別。在那段連期待都不敢奢侈、只能在螢幕前渴求消息的沈默裡，5 月 11
|
|
||||||
日的簽約消息像是一記響亮的耳光，將所有人從絕望中打醒。那是從未知的空虛到塵埃落定的震撼——原來這不是終點，奇蹟真的在現實生了根。</p>
|
|
||||||
|
|
||||||
<p>四月的重逢是老小黃們守候十六年的淚水；而九月的單獨演唱會，則讓無數新小黃見證了那份無法動搖的羈絆。在那片黃色海洋裡，我們不只愛上了水晶男孩，更愛上了他們與小黃之間那種跨越時空的愛情。雖然遺憾沒能看見六人並肩的畫面，但那股新舊交織的生命力，確實為水晶注入了新的靈魂。
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<p>這份陪伴在十二月有了溫柔的延續。志溶雖然未回歸舞台，卻在《超回》中以最真實、幸福的模樣走入大家的生活。舞台上的空位雖讓心底隱隱作痛，但看著他幸福的樣子，我們才明白：原來大家只是換個方式一起變老，這份情誼早已超越了表演。
|
|
||||||
</p>
|
|
||||||
</article>
|
|
||||||
<article class="story-node" data-era="2016">
|
|
||||||
<h3>從路人到鐵粉：從夢境進現實</h3>
|
|
||||||
<p>當《無限挑戰》的燈光熄滅，原本以為這場跨越十六年的重逢僅是曇花一現的夢境，但隨後五位成員與 YG
|
|
||||||
簽約的消息，正式宣告了傳奇的歸來。九月演唱會上，新舊粉絲在黃色海洋中見證了跨越時空的強烈羈絆，那種心意相通的悸動，讓我們知道這道光從未真正熄滅過。</p>
|
|
||||||
|
|
||||||
<p>而志溶雖然未參與合體，卻在十二月演唱會落幕當天，透過《超人回來了》的預告驚喜現身。這不是告別，而是他選擇以另一種最真實、最溫馨的形式，在現實生活中繼續陪伴著大家。舞台上的空位雖然令人難過，但看到他帶著孩子幸福的模樣，我們才明白：原來水晶與粉絲的羈絆，早已超越了表演的定義，而是要在彼此的生活裡，一起變老，一起寫下新的篇章。
|
|
||||||
</p>
|
|
||||||
### 餘溫與新生：從奇蹟走向恆久
|
|
||||||
|
|
||||||
<p>當《無限挑戰》的燈光熄滅，原以為那場重逢只是十六年一次的曇花一現。同年五月，五位成員與 YG
|
|
||||||
簽約的消息，讓夢境落實成了現實。四月的「六六歌」是屬於老粉絲守候十六年的淚水與重逢；而九月的個人演唱會，則是一場關於愛情的傳承。無數新粉絲透過黃色海洋，目睹了偶像與歌迷間那種超越時空的生死契闊，雖然志溶未能站上舞台成了這場盛宴唯一的遺憾，但那種「水晶男孩」與「黃飯」共生的生命力，卻從那一刻起，重新注入了新的靈魂。
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<p>這份羈絆在十二月有了更溫柔的延續。演唱會落幕當晚，志溶帶著孩子在《超人回來了》預告中驚喜現身。這不是告別，而是他換了一種最真實的形式，在現實生活中守護著這份情誼。舞台上的空位雖讓心底隱隱作痛，但看著他幸福的模樣，我們才懂得：水晶男孩的定義早已超越了表演，而是彼此約好在不同的時空裡，也要一起變老，一起寫下永不終結的篇章。
|
|
||||||
</p>
|
|
||||||
</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="fallen/totoga2.html">六六歌2 整合專區</a>（影片／電子書／紀實長文八章，同一頁切換模式即可）。
|
|
||||||
</p>
|
|
||||||
<div class="story-ebook-cta">
|
|
||||||
<a href="fallen/totoga2.html#ebook" class="btn story-ebook-btn">開啟六六歌2 紀實電子書</a>
|
|
||||||
<a href="fallen/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="fallen/totoga2.html#ssg2">對照這一段幕後敘事</a></p>
|
|
||||||
</article>
|
|
||||||
<article id="negotiate" class="story-node" data-era="交涉">
|
|
||||||
<h3>命運的交涉</h3>
|
|
||||||
<p>KTV、游擊演唱會規則、與其說講道理不如說把真心擺上桌面——交涉的不是合約字面，而是還願不願意再一次肩並肩。</p>
|
|
||||||
<p><a href="fallen/totoga2.html#negotiate">讀交涉與對話肌理</a></p>
|
|
||||||
</article>
|
|
||||||
<article id="complete" class="story-node" data-era="歸位">
|
|
||||||
<h3>拼圖的歸位</h3>
|
|
||||||
<p>變數一個個被排除之後，驚喜接上登場段落；缺一角舞台的視覺，終於對齊觀眾席上堅守的那片黃。</p>
|
|
||||||
<p><a href="fallen/totoga2.html#gather">從「召集」段開始補這條線</a></p>
|
|
||||||
</article>
|
|
||||||
<article id="past" class="story-node" data-era="最初">
|
|
||||||
<h3>巔峰與雨天</h3>
|
|
||||||
<p>急凍、告別、各自的跑道——並不是要你沉浸遺憾，而是讓你懂：後來每一次亮燈，為什麼會更值得尖叫。</p>
|
|
||||||
<p><a href="fallen/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="assets/js/particles.js"></script>
|
|
||||||
<script src="assets/js/portal-nav.js"></script>
|
|
||||||
</body>
|
|
||||||
|
|
||||||
</html>
|
|
||||||
@@ -0,0 +1,190 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh-Hant">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>THREE WORDS · 10th Anniversary</title>
|
||||||
|
<meta name="description" content="SECHSKIES〈세 단어 (THREE WORDS)〉發行十週年紀念頁：2016.10.07—2026.10.07。">
|
||||||
|
<meta property="og:title" content="THREE WORDS · 10th Anniversary">
|
||||||
|
<meta property="og:description" content="現在、這裡、我們。十年後，再次相遇。">
|
||||||
|
<meta property="og:image" content="public/og.png">
|
||||||
|
<style>
|
||||||
|
:root{--ink:#07101d;--cream:#f2ede2;--gold:#efb53f;--blue:#16334d;--line:rgba(255,255,255,.22)}
|
||||||
|
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--ink);color:var(--cream);font-family:Arial,"Noto Sans TC","Microsoft JhengHei",sans-serif}button,a{font:inherit}
|
||||||
|
.hero{position:relative;min-height:100svh;overflow:hidden;background:radial-gradient(circle at 76% 18%,#80583c 0,#243f57 18%,#0a1726 49%,#050b13 100%);transition:1s}.hero.isLit{background:radial-gradient(circle at 73% 23%,#ffc676 0,#355e7c 25%,#0b1d31 54%,#050b13 100%)}
|
||||||
|
nav{position:absolute;z-index:6;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:26px 4vw;border-bottom:1px solid var(--line);font:700 10px Arial;letter-spacing:.28em}.logo{font-size:24px;letter-spacing:-.08em}.logo span{margin-left:7px;color:var(--gold);font-size:12px;vertical-align:top}
|
||||||
|
.light{position:absolute;width:46vw;height:46vw;right:-4vw;top:-12vw;border-radius:50%;background:rgba(255,194,111,.16);filter:blur(30px);transition:1s}.isLit .light{background:rgba(255,202,115,.38);transform:scale(1.15)}
|
||||||
|
.frames{position:absolute;inset:12vh 5vw 8vh 42vw;perspective:900px}.frames i{position:absolute;display:block;width:36%;height:72%;border:1px solid rgba(255,255,255,.42);background:linear-gradient(135deg,rgba(255,255,255,.06),transparent);backdrop-filter:blur(2px);transform:rotateY(-14deg) rotateZ(4deg);box-shadow:0 30px 80px rgba(0,0,0,.24)}.frames i:nth-child(1){left:0;top:12%}.frames i:nth-child(2){left:29%;top:2%}.frames i:nth-child(3){left:58%;top:15%}
|
||||||
|
.noise{position:absolute;inset:0;opacity:.14;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E")}
|
||||||
|
.heroText{position:relative;z-index:4;padding:16vh 0 11vh 7vw;width:min(760px,90vw)}.kicker,.sectionTag{font:700 10px/1.5 Arial;letter-spacing:.34em;color:var(--gold)}h1{margin:28px 0 12px;font:900 clamp(76px,12vw,178px)/.72 Arial;letter-spacing:-.09em}h1 span{display:block}.outline{color:transparent;-webkit-text-stroke:1.5px rgba(242,237,226,.75)}
|
||||||
|
.anniversary{display:flex;align-items:center;gap:16px;margin:24px 0}.anniversary strong{font:900 clamp(72px,9vw,132px)/.7 Arial;color:var(--gold);letter-spacing:-.08em}.anniversary p{font:700 16px/1.15 Arial;letter-spacing:.12em}.dates{font:700 12px Arial;letter-spacing:.2em}.dates b{color:var(--gold);margin:0 10px}.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:36px}.actions button{padding:15px 20px;border:1px solid transparent;cursor:pointer;transition:.25s}.primary{background:var(--gold);color:var(--ink);font-weight:800}.secondary{background:transparent;color:var(--cream);border-color:rgba(255,255,255,.5)!important}.actions button:hover{transform:translateY(-3px)}.threeDots{position:absolute;z-index:4;right:4vw;bottom:36px;display:flex;gap:10px}.threeDots b{width:8px;height:8px;border:1px solid var(--cream);border-radius:50%}.threeDots b:first-child{background:var(--gold);border-color:var(--gold)}
|
||||||
|
.statement,.words,.memory{padding:100px 8vw}.statement{display:grid;grid-template-columns:1fr 3fr;gap:6vw;background:var(--gold);color:var(--ink)}.statement .sectionTag{color:var(--ink)}.hangul{font:700 13px Arial;letter-spacing:.24em}.statement h2{font:900 clamp(48px,8vw,112px)/1 serif;margin:20px 0 42px;letter-spacing:-.06em}.bigCopy{font:700 clamp(25px,3.4vw,48px)/1.55 serif;margin:0}
|
||||||
|
.words{background:var(--cream);color:var(--ink)}.words .sectionTag{color:#7c682f}.wordGrid{display:grid;grid-template-columns:repeat(3,1fr);margin-top:65px;border-top:1px solid #999}.wordGrid article{padding:28px 32px 45px 0;margin-right:32px;border-right:1px solid #aaa}.wordGrid span{font-size:11px;color:#786d51}.wordGrid h3{font:900 clamp(44px,7vw,100px)/1 Arial;letter-spacing:-.07em;margin:28px 0 16px}.wordGrid p{color:#59606a;line-height:1.7}
|
||||||
|
.lyricsPreview{position:relative;overflow:hidden;display:grid;grid-template-columns:1fr 2fr;gap:7vw;padding:100px 8vw;background:radial-gradient(circle at 8% 15%,#28455f 0,#102337 32%,#07101d 74%);border-top:1px solid rgba(255,255,255,.12)}.lyricsPreview:after{content:"3";position:absolute;right:-.04em;bottom:-.32em;font:900 min(48vw,680px)/1 Arial;color:rgba(255,255,255,.025);pointer-events:none}.lyricsMeta{position:relative;z-index:1}.lyricsMeta>span{display:block;margin-top:38px;font:900 clamp(38px,5vw,72px)/.95 Arial;letter-spacing:-.06em;color:transparent;-webkit-text-stroke:1px rgba(242,237,226,.5)}.lyricsLines{position:relative;z-index:1;border-left:1px solid rgba(239,181,63,.6);padding-left:clamp(25px,4vw,64px)}.lyricsLines p{margin:0 0 18px;font:700 clamp(22px,3vw,44px)/1.25 serif;letter-spacing:-.02em}.lyricsLines p:nth-child(2n){color:#aebdca}.lyricsLines a{display:inline-flex;align-items:center;gap:22px;margin-top:28px;padding:15px 20px;background:var(--gold);color:var(--ink);font-weight:800;text-decoration:none;transition:.25s}.lyricsLines a:hover{transform:translateY(-3px);box-shadow:0 15px 35px rgba(0,0,0,.28)}.lyricsLines a span{font-size:18px}
|
||||||
|
.memory{background:#0c1a2a}.memory>.sectionTag{display:block;margin-bottom:55px}.memory article{display:grid;grid-template-columns:1fr 2fr;gap:6vw;border-top:1px solid var(--line);padding:40px 0}.memory strong{font:900 clamp(42px,7vw,96px)/1 Arial;color:var(--gold);letter-spacing:-.06em}.memory h3{font:700 clamp(25px,3vw,42px)/1.2 serif;margin:0 0 16px}.memory p{max-width:650px;color:#b9c0c8;line-height:1.8;margin:0}
|
||||||
|
.video{padding:90px 8vw;background:#d9d0bf;color:var(--ink);display:grid;grid-template-columns:minmax(250px,.75fr) minmax(0,1.5fr);align-items:center;gap:7vw}.video .sectionTag{color:#796727}.video h2{font:800 clamp(42px,5vw,76px)/1.12 serif;margin:25px 0 32px}.videoHeading>a{display:inline-block;color:var(--ink);font-weight:800;text-decoration:none;border-bottom:1px solid var(--ink);padding-bottom:5px}.videoHeading>a:hover{color:#796727}.videoFrame{position:relative;width:100%;aspect-ratio:16/9;background:#050b13;box-shadow:0 35px 80px rgba(7,16,29,.25);overflow:hidden}.videoFrame:before{content:"";position:absolute;inset:-1px;border:1px solid rgba(255,255,255,.22);pointer-events:none;z-index:1}.videoFrame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
|
||||||
|
.stageArchive{padding:100px 8vw;background:var(--cream);color:var(--ink)}.stageIntro{display:grid;grid-template-columns:1fr 1.5fr;gap:20px 6vw;align-items:end;margin-bottom:55px}.stageIntro .sectionTag{color:#796727;grid-column:1/-1}.stageIntro h2{margin:0;font:900 clamp(54px,8vw,108px)/.9 serif;letter-spacing:-.06em}.stageIntro>p:last-child{max-width:470px;margin:0;color:#59606a;line-height:1.8}.stageTable{border-top:2px solid var(--ink)}.stageHead,.stageRow{display:grid;grid-template-columns:.55fr 2fr .8fr;gap:28px;align-items:center}.stageHead{padding:15px 0;border-bottom:1px solid #9e998e;font:700 9px Arial;letter-spacing:.2em;color:#76682f}.stageRow{padding:24px 0;border-bottom:1px solid #aaa59b}.stageRow time{font:900 clamp(22px,2.5vw,38px)/1 Arial;letter-spacing:-.04em}.stageVideo{display:grid;grid-template-columns:minmax(150px,240px) 1fr;gap:24px;align-items:center;color:var(--ink);text-decoration:none}.stageThumb{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:#0a1726}.stageThumb img{width:100%;height:100%;object-fit:cover;transition:.35s}.stageThumb b{position:absolute;inset:50% auto auto 50%;translate:-50% -50%;width:46px;height:46px;border-radius:50%;display:grid;place-content:center;padding-left:3px;background:var(--gold);box-shadow:0 8px 25px rgba(0,0,0,.3)}.stageVideo:hover img{transform:scale(1.05)}.stageVideo>span:last-child{display:grid;gap:12px}.stageVideo strong{font:800 clamp(18px,2vw,28px)/1.25 serif}.stageVideo small{font:700 9px Arial;letter-spacing:.15em;color:#796727}.station{display:grid;gap:8px}.station strong{font:900 clamp(30px,4vw,58px)/1 Arial;color:#c48f17}.station span{font-size:12px;color:#59606a}
|
||||||
|
footer{display:flex;justify-content:space-between;gap:20px;padding:26px 4vw;background:#040910;color:#8d97a4;font:10px Arial;letter-spacing:.16em}
|
||||||
|
@media(max-width:720px){.hero{min-height:820px}.frames{inset:12vh -18vw 29vh 36vw;opacity:.8}.heroText{padding:17vh 7vw 8vh}.heroText h1{font-size:72px}.statement{grid-template-columns:1fr;padding:70px 7vw}.words,.memory{padding:75px 7vw}.wordGrid{grid-template-columns:1fr}.wordGrid article{border-right:0;border-bottom:1px solid #aaa;margin:0}.lyricsPreview{grid-template-columns:1fr;padding:75px 7vw}.lyricsMeta>span{margin:22px 0 36px}.lyricsLines{padding-left:24px}.lyricsLines p{font-size:24px}.memory article{grid-template-columns:1fr}.video{grid-template-columns:1fr;padding:65px 7vw;gap:42px}.video h2{font-size:48px}.stageArchive{padding:75px 7vw}.stageIntro{grid-template-columns:1fr}.stageIntro .sectionTag{grid-column:auto}.stageHead{display:none}.stageRow{grid-template-columns:1fr;gap:18px;padding:28px 0}.stageVideo{grid-template-columns:1fr}.stageRow time{font-size:30px}.station{grid-template-columns:auto 1fr;align-items:baseline}.station strong{font-size:38px}footer{flex-direction:column}}
|
||||||
|
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<main>
|
||||||
|
<section class="hero" id="hero">
|
||||||
|
<nav>
|
||||||
|
<span class="logo">3W<span>10</span></span>
|
||||||
|
<span>2016 — 2026</span>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<div class="light" aria-hidden="true"></div>
|
||||||
|
<div class="frames" aria-hidden="true"><i></i><i></i><i></i></div>
|
||||||
|
<div class="noise" aria-hidden="true"></div>
|
||||||
|
|
||||||
|
<div class="heroText">
|
||||||
|
<p class="kicker">SECHSKIES · 세 단어</p>
|
||||||
|
<h1><span>THREE</span><span class="outline">WORDS</span></h1>
|
||||||
|
<div class="anniversary"><strong>10</strong><p>TH<br>ANNIVERSARY</p></div>
|
||||||
|
<p class="dates">2016.10.07 <b>—</b> 2026.10.07</p>
|
||||||
|
<div class="actions">
|
||||||
|
<button class="primary" id="litToggle">點亮第十年的光 <span>✦</span></button>
|
||||||
|
<button class="secondary" id="downloadPoster">下載 IG 紀念圖 ↓</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="threeDots"><b></b><b></b><b></b></div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="statement">
|
||||||
|
<p class="sectionTag">01 / TEN YEARS LATER</p>
|
||||||
|
<div>
|
||||||
|
<p class="hangul">지금 · 여기 · 우리</p>
|
||||||
|
<h2>現在。這裡。我們。</h2>
|
||||||
|
<p class="bigCopy">有些歌不只是被聽見，<br>而是替一段等待留下名字。</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="words">
|
||||||
|
<p class="sectionTag">02 / THREE WORDS</p>
|
||||||
|
<div class="wordGrid">
|
||||||
|
<article><span>01</span><h3>NOW</h3><p>十年後的此刻，重新按下播放。</p></article>
|
||||||
|
<article><span>02</span><h3>HERE</h3><p>回到那個讓我們再次相遇的地方。</p></article>
|
||||||
|
<article><span>03</span><h3>US</h3><p>歌曲仍在，我們也仍然在這裡。</p></article>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="lyricsPreview">
|
||||||
|
<div class="lyricsMeta">
|
||||||
|
<p class="sectionTag">03 / LYRICS PREVIEW</p>
|
||||||
|
<span>세 단어<br>THREE WORDS</span>
|
||||||
|
</div>
|
||||||
|
<div class="lyricsLines">
|
||||||
|
<p>I just wanna be with you</p>
|
||||||
|
<p>내가 사는 이유</p>
|
||||||
|
<p>다시는 멀리 가지 않을게요</p>
|
||||||
|
<p>I'll always be here for you</p>
|
||||||
|
<p>세월이 지난 후</p>
|
||||||
|
<a href="https://jekkinoopy.github.io/sechskies/extra/lyrics.html" target="_blank" rel="noreferrer">完整歌詞與歌曲資料 <span>↗</span></a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="memory">
|
||||||
|
<p class="sectionTag">04 / FROM THEN TO NOW</p>
|
||||||
|
<article><strong>2016.10.07</strong><div><h3>重新相遇</h3><p>睽違十六年後，SECHSKIES 以〈세 단어 (THREE WORDS)〉帶回重逢的聲音。</p></div></article>
|
||||||
|
<article><strong>2026.10.07</strong><div><h3>十年以後</h3><p>旋律走過十年，當時的感動仍停在現在、這裡、我們之間。</p></div></article>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="video">
|
||||||
|
<div class="videoHeading">
|
||||||
|
<p class="sectionTag">OFFICIAL MUSIC VIDEO</p>
|
||||||
|
<h2>再聽一次，<br>十年前的三個詞。</h2>
|
||||||
|
<a href="https://www.youtube.com/watch?v=m7Zt_p9S-yg" target="_blank" rel="noreferrer">在 YouTube 開啟 ↗</a>
|
||||||
|
</div>
|
||||||
|
<div class="videoFrame">
|
||||||
|
<iframe
|
||||||
|
src="https://www.youtube-nocookie.com/embed/m7Zt_p9S-yg?rel=0"
|
||||||
|
title="SECHSKIES - 세 단어 (THREE WORDS) Official Music Video"
|
||||||
|
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
||||||
|
referrerpolicy="strict-origin-when-cross-origin"
|
||||||
|
allowfullscreen></iframe>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="stageArchive">
|
||||||
|
<div class="stageIntro">
|
||||||
|
<p class="sectionTag">05 / MUSIC SHOW ARCHIVE</p>
|
||||||
|
<h2>打歌舞台</h2>
|
||||||
|
<p>把當年的舞台依日期收好，從十年前重新播放。</p>
|
||||||
|
</div>
|
||||||
|
<div class="stageTable" role="table" aria-label="THREE WORDS 打歌舞台列表">
|
||||||
|
<div class="stageHead" role="row">
|
||||||
|
<span role="columnheader">DATE</span>
|
||||||
|
<span role="columnheader">VIDEO</span>
|
||||||
|
<span role="columnheader">STATION</span>
|
||||||
|
</div>
|
||||||
|
<div class="stageRow" role="row">
|
||||||
|
<time role="cell" datetime="2016.12.04">2016.12.04</time>
|
||||||
|
<a class="stageVideo" role="cell" href="https://www.youtube.com/watch?v=8HTqr3Wp-R0" target="_blank" rel="noreferrer">
|
||||||
|
<span class="stageThumb">
|
||||||
|
<img src="https://i.ytimg.com/vi/8HTqr3Wp-R0/hqdefault.jpg" alt="인기가요 · Inkigayo THREE WORDS · Goodbye Stage 影片縮圖">
|
||||||
|
<b>▶</b>
|
||||||
|
</span>
|
||||||
|
<span><strong>THREE WORDS · Goodbye Stage</strong><small>WATCH ON YOUTUBE ↗</small></span>
|
||||||
|
</a>
|
||||||
|
<div class="station" role="cell"><strong>SBS</strong><span>인기가요 · Inkigayo</span></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<footer><span>FAN-MADE 10TH ANNIVERSARY TRIBUTE</span><span>SECHSKIES · THREE WORDS · 2016—2026</span></footer>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
var hero = document.getElementById("hero");
|
||||||
|
var litToggle = document.getElementById("litToggle");
|
||||||
|
var lit = false;
|
||||||
|
litToggle.addEventListener("click", function () {
|
||||||
|
lit = !lit;
|
||||||
|
hero.classList.toggle("isLit", lit);
|
||||||
|
litToggle.firstChild.textContent = lit ? "讓記憶停在這裡 " : "點亮第十年的光 ";
|
||||||
|
});
|
||||||
|
|
||||||
|
document.getElementById("downloadPoster").addEventListener("click", function () {
|
||||||
|
var canvas = document.createElement("canvas");
|
||||||
|
canvas.width = 1080;
|
||||||
|
canvas.height = 1350;
|
||||||
|
var ctx = canvas.getContext("2d");
|
||||||
|
if (!ctx) return;
|
||||||
|
var glow = ctx.createRadialGradient(780, 300, 10, 780, 300, 900);
|
||||||
|
glow.addColorStop(0, "#e0a16b");
|
||||||
|
glow.addColorStop(.34, "#264765");
|
||||||
|
glow.addColorStop(1, "#07101d");
|
||||||
|
ctx.fillStyle = glow;
|
||||||
|
ctx.fillRect(0, 0, 1080, 1350);
|
||||||
|
ctx.strokeStyle = "rgba(255,255,255,.45)";
|
||||||
|
ctx.lineWidth = 2;
|
||||||
|
[150, 390, 630].forEach(function (x, index) {
|
||||||
|
ctx.strokeRect(x, 180 + index * 70, 420, 660);
|
||||||
|
});
|
||||||
|
ctx.fillStyle = "#f5efe2";
|
||||||
|
ctx.font = "700 106px Arial";
|
||||||
|
ctx.fillText("THREE", 72, 980);
|
||||||
|
ctx.fillText("WORDS", 72, 1085);
|
||||||
|
ctx.fillStyle = "#efb53f";
|
||||||
|
ctx.font = "700 36px Arial";
|
||||||
|
ctx.fillText("10TH ANNIVERSARY", 76, 1155);
|
||||||
|
ctx.fillStyle = "#f5efe2";
|
||||||
|
ctx.font = "30px Arial";
|
||||||
|
ctx.fillText("2016.10.07 — 2026.10.07", 76, 1225);
|
||||||
|
ctx.font = "26px Arial";
|
||||||
|
ctx.fillText("NOW · HERE · US", 76, 1285);
|
||||||
|
var link = document.createElement("a");
|
||||||
|
link.download = "three-words-10th-anniversary.png";
|
||||||
|
link.href = canvas.toDataURL("image/png");
|
||||||
|
link.click();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
Reference in New Issue
Block a user