新增推坑地圖頁（未接導覽，僅網址直達）
This commit is contained in:
@@ -0,0 +1,109 @@
|
||||
/* yellow-note/pitch-map.html：頁面專屬版型（頁內索引、精選標籤卡、影音嵌入） */
|
||||
|
||||
/* 本頁 .card 皆作為 <a> 使用，蓋掉瀏覽器預設連結底線／藍字（本檔僅此頁引用，不影響全站 .card） */
|
||||
a.card {
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.pitch-map-index {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 24px;
|
||||
margin: 0 0 2rem;
|
||||
}
|
||||
|
||||
.pitch-map-index a {
|
||||
color: var(--color-brand-dark);
|
||||
font-weight: 700;
|
||||
letter-spacing: 1px;
|
||||
text-decoration: none;
|
||||
border-bottom: 2px solid transparent;
|
||||
padding-bottom: 2px;
|
||||
}
|
||||
|
||||
.pitch-map-index a:hover {
|
||||
border-bottom-color: var(--color-brand);
|
||||
}
|
||||
|
||||
.pitch-map-section {
|
||||
margin-bottom: 3.5rem;
|
||||
}
|
||||
|
||||
.pitch-map-highlights,
|
||||
.pitch-map-links {
|
||||
margin-bottom: 2.5rem;
|
||||
}
|
||||
|
||||
.pitch-map-highlight {
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.pitch-map-highlight i {
|
||||
font-size: 1.5rem;
|
||||
color: var(--color-brand);
|
||||
}
|
||||
|
||||
.pitch-map-highlight h3 {
|
||||
margin: 0;
|
||||
font-size: 1.05rem;
|
||||
color: #2e2e2e;
|
||||
}
|
||||
|
||||
.pitch-map-highlight p {
|
||||
margin: 0;
|
||||
color: #585858;
|
||||
font-size: 0.92rem;
|
||||
}
|
||||
|
||||
.pitch-map-media {
|
||||
max-width: 42rem;
|
||||
margin: 2rem auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.pitch-map-video-note {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.pitch-map-embed {
|
||||
margin: 2rem auto;
|
||||
max-width: 42rem;
|
||||
}
|
||||
|
||||
.pitch-map-embed iframe {
|
||||
width: 100%;
|
||||
border: 0;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.pitch-map-embed--video {
|
||||
aspect-ratio: 16 / 9;
|
||||
}
|
||||
|
||||
.pitch-map-embed--video iframe {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.pitch-map-yellowkies-intro {
|
||||
max-width: 42rem;
|
||||
margin: 0 auto 2rem;
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.pitch-map-yellowkies-intro i {
|
||||
font-size: 1.5rem;
|
||||
color: var(--color-brand);
|
||||
flex-shrink: 0;
|
||||
margin-top: 0.3rem;
|
||||
}
|
||||
@@ -0,0 +1,150 @@
|
||||
<!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/pitch-map.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="pitch-map-page">
|
||||
<header class="inner-page-header">
|
||||
<div class="header-inner site-header-inner">
|
||||
<h1 class="main-title">推坑地圖</h1>
|
||||
<div class="subtitle-wrap">
|
||||
<span class="sub-title">SECHSKIES PITCH GUIDE</span>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<nav class="portal-nav" aria-label="水晶男孩推廣部導覽" data-portal-nav></nav>
|
||||
|
||||
<canvas id="particles"></canvas>
|
||||
|
||||
<div class="container">
|
||||
|
||||
<nav class="pitch-map-index" aria-label="頁內索引">
|
||||
<a href="#about-sechskies">關於水晶</a>
|
||||
<a href="#about-yellowkies">關於小黃</a>
|
||||
</nav>
|
||||
|
||||
<section id="about-sechskies" class="pitch-map-section">
|
||||
<h2 class="section-title">ABOUT SECHSKIES｜關於水晶男孩</h2>
|
||||
|
||||
<div class="story-grid pitch-map-highlights">
|
||||
<a class="card pitch-map-highlight" href="../concert/concert.html">
|
||||
<i class="fa-solid fa-star" aria-hidden="true"></i>
|
||||
<h3>暌違16年的等待</h3>
|
||||
<p>所有活動</p>
|
||||
</a>
|
||||
<a class="card pitch-map-highlight" href="../vedio/variety-shows.html">
|
||||
<i class="fa-solid fa-star" aria-hidden="true"></i>
|
||||
<h3>偶像的指南針</h3>
|
||||
<p>精選作品</p>
|
||||
</a>
|
||||
<a class="card pitch-map-highlight" href="../member/member.html">
|
||||
<i class="fa-solid fa-star" aria-hidden="true"></i>
|
||||
<h3>逆齡完顏男團</h3>
|
||||
<p>六顆水晶</p>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="pitch-map-media">
|
||||
<p class="section-copy pitch-map-video-note">
|
||||
《我愛偶像 Idols of Asia》【小黃們集合！】水晶男孩SECHSKIES重啟團體活動 出道20年創下多項紀錄
|
||||
</p>
|
||||
<div class="pitch-map-embed">
|
||||
<iframe src="https://open.spotify.com/embed/playlist/2bM6FlYn3OxNKzfdjre0W7" width="100%"
|
||||
height="380" frameborder="0"
|
||||
allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"
|
||||
loading="lazy" title="部長精選歌單"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="subtitle-wrap">
|
||||
<span class="sub-title">MILESTONE</span>
|
||||
</div>
|
||||
|
||||
<div class="merged-storyline">
|
||||
<article class="story-node" data-era="1997">
|
||||
<h3>出道即巔峰</h3>
|
||||
<p>水晶男孩 1997 年 4 月 15 日出道，一出道就和 H.O.T（韓國第一支男孩團體，「韓流」的開山鼻祖）平分秋色，為 90
|
||||
年代的歌壇颶風主角。團名是德語的六顆水晶，全盛期也如名字一般閃耀：發行五張專輯、銷售量高達 400
|
||||
萬張、演唱會門票年年售罄、曾獲得 32 次冠軍獎盃，僅三年一個月便取得如此輝煌的成績。</p>
|
||||
</article>
|
||||
<article class="story-node" data-era="2000">
|
||||
<h3>無預警解散</h3>
|
||||
<p>2000 年 5 月 18 日，水晶男孩召開記者會，無預警宣布解散，令粉絲陷入莫大的震驚與悲慟。事業巔峰期做出解散的決定，令外界深感意外不解，歌迷更是無法接受，部分激進歌迷群起橫躺街頭抗議，幾乎成為社會事件。解散的
|
||||
16 年間，六人皆未以水晶男孩名義合體演出。</p>
|
||||
</article>
|
||||
<article class="story-node" data-era="2016">
|
||||
<h3>正式重組回歸</h3>
|
||||
<p>韓國代表性綜藝節目《無限挑戰》製作的特別企劃「星期六星期六我是歌手2」，特別邀請水晶男孩詢問重組意見，並花了不少心力說服離開舞台 16
|
||||
年的團員，一起舉辦了突襲演唱會。節目播出後造成熱烈回響，同年六月，水晶男孩正式重組回歸歌壇。</p>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<div class="story-grid pitch-map-links">
|
||||
<a class="card" href="../member/member.html">
|
||||
<h3>MEMBER</h3>
|
||||
<p>認識六顆水晶的名字與長相</p>
|
||||
</a>
|
||||
<a class="card" href="../vedio/variety-shows.html">
|
||||
<h3>PORTFOLIO</h3>
|
||||
<p>20 年累積作品裡的精選節目</p>
|
||||
</a>
|
||||
<a class="card" href="../concert/concert.html">
|
||||
<h3>水晶官方活動</h3>
|
||||
<p>官方活動整理與現場舞台</p>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="about-yellowkies" class="pitch-map-section">
|
||||
<h2 class="section-title">ABOUT YELLOWKIES｜關於小黃</h2>
|
||||
|
||||
<div class="pitch-map-yellowkies-intro">
|
||||
<i class="fa-solid fa-lightbulb" aria-hidden="true"></i>
|
||||
<p class="section-copy">
|
||||
小黃 Yellowkies 是水晶男孩歌迷統稱。因水晶男孩應援色是黃色，粉絲們會穿黃色雨衣、手拿黃色氣球，故被水晶男孩主唱姜成勳暱稱為小黃們。分開
|
||||
16 年的粉絲和偶像的羈絆，也是圈新粉的一大重點；下方影片是韓國阿拉唷和小黃的訪談（3:00–35:40）。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="pitch-map-embed pitch-map-embed--video">
|
||||
<iframe src="https://www.youtube.com/embed/YdrMQ6-C_Pw" title="韓國阿拉唷 x 小黃訪談" loading="lazy"
|
||||
allowfullscreen></iframe>
|
||||
</div>
|
||||
|
||||
<div class="story-grid pitch-map-highlights">
|
||||
<a class="card pitch-map-highlight" href="../concert/concert.html">
|
||||
<i class="fa-solid fa-star" aria-hidden="true"></i>
|
||||
<h3>超過16年的喜愛</h3>
|
||||
<p>精選應援</p>
|
||||
</a>
|
||||
<a class="card pitch-map-highlight" href="../index.html#start">
|
||||
<i class="fa-solid fa-star" aria-hidden="true"></i>
|
||||
<h3>迷妹的指南針</h3>
|
||||
<p>成粉養成</p>
|
||||
</a>
|
||||
</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>
|
||||
Reference in New Issue
Block a user