220 lines
27 KiB
HTML
220 lines
27 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="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> ?亙??血???nbsp;<i class="fa-solid fa-circle-right"
|
||
aria-hidden="true"></i> ?????nbsp;<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">
|
||
隞交撱?<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 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嚗?嚗?>
|
||
<!-- ?交??GIF ??嚗?摨? src ?? ./assets/images/mission-balloon-sea.gif ?喳 -->
|
||
<img src="./assets/images/暺瘚瑟?.gif" alt="?⊿?? ?剖甇? ?暸?ｇ??典暺瘞??瘚?>
|
||
</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撟???5?伐?瘞湔?瑕酋隞亙撥???飛??脯韏琿?嚗?瘞湔嚚ap??頩瘞湔嚚蜓?晞??擳?鈭斤?嚗?摰?
|
||
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>?冽??衣????鳴????舫???蝡鋡怨翰?思?鈭?甇Ｙ泵嚗?000撟??迤撘圾????∪??芰撅粥?箔?銝??楝嚗偌?園脣隡??? </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">?剖甇? ?游?撠?</a>嚗蔣???餃??賂?蝝撖阡?蝡??????芋撘?荔??? </p>
|
||
<div class="story-ebook-cta">
|
||
<a href="fallen/totoga2.html#ebook" class="btn story-ebook-btn">???剖甇? 蝝撖阡摮</a>
|
||
<a href="fallen/totoga2.html" class="btn story-ebook-btn">?剖甇? ?游?撠?</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>
|