345 lines
17 KiB
HTML
345 lines
17 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>水晶男孩｜精華牆</title>
|
|
<link rel="stylesheet" href="../assets/css/style.css">
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
|
|
<link rel="stylesheet" href="../assets/css/tablet.css">
|
|
<style>
|
|
/* ── 精華牆頁專用樣式 ── */
|
|
.hwfp-navbar {
|
|
background: var(--color-bg-raised) !important;
|
|
}
|
|
|
|
.hwfp-navbar .navbar-brand,
|
|
.hwfp-navbar .nav-link {
|
|
color: var(--color-text-inverse);
|
|
}
|
|
|
|
.hwfp-navbar .nav-link:hover,
|
|
.hwfp-navbar .nav-link.active {
|
|
color: var(--color-brand);
|
|
}
|
|
|
|
.hwfp-section {
|
|
scroll-margin-top: 78px;
|
|
}
|
|
|
|
.hwfp-lead {
|
|
text-align: center;
|
|
color: var(--color-text-muted);
|
|
font-size: 1rem;
|
|
margin: 0 auto 1.75rem;
|
|
max-width: 620px;
|
|
}
|
|
|
|
.hwfp-card {
|
|
border: 1px solid rgba(255, 204, 0, 0.25);
|
|
border-radius: 12px;
|
|
}
|
|
|
|
.hwfp-card h3 {
|
|
color: var(--color-brand-dark);
|
|
}
|
|
|
|
.hwfp-card p {
|
|
color: var(--color-text-muted);
|
|
}
|
|
|
|
.hwfp-section .carousel-item img {
|
|
height: 320px;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.hwfp-cta {
|
|
text-align: center;
|
|
margin-top: 1.5rem;
|
|
}
|
|
|
|
.hwfp-tech-note {
|
|
text-align: center;
|
|
color: var(--color-text-muted);
|
|
font-size: 0.78rem;
|
|
margin: 2rem auto 0;
|
|
max-width: 640px;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body class="hw-bootstrap-page">
|
|
<header class="inner-page-header" id="top">
|
|
<div class="header-inner site-header-inner">
|
|
<h1 class="main-title">精華牆</h1>
|
|
<div class="subtitle-wrap">
|
|
<span class="sub-title">ALBUMS · MEMBERS · CONCERTS · YELLOW NOTE</span>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<nav class="portal-nav" aria-label="水晶男孩推廣部導覽" data-portal-nav></nav>
|
|
|
|
<nav class="navbar navbar-expand-lg navbar-dark hwfp-navbar sticky-top">
|
|
<div class="container">
|
|
<a class="navbar-brand fw-bold" href="#top">推廣部精華牆</a>
|
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#hwfpNav"
|
|
aria-controls="hwfpNav" aria-expanded="false" aria-label="切換頁內導覽">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
<div class="collapse navbar-collapse" id="hwfpNav">
|
|
<ul class="navbar-nav ms-auto">
|
|
<li class="nav-item"><a class="nav-link" href="#chronicle">淪陷瞬間</a></li>
|
|
<li class="nav-item"><a class="nav-link" href="#members">完整的六顆</a></li>
|
|
<li class="nav-item"><a class="nav-link" href="#albums">黃色留聲機</a></li>
|
|
<li class="nav-item"><a class="nav-link" href="#concerts">現場的震撼</a></li>
|
|
<li class="nav-item"><a class="nav-link" href="#yellownote">Yellow Note</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<canvas id="particles"></canvas>
|
|
|
|
<main class="content-container">
|
|
|
|
<section id="chronicle" class="hwfp-section">
|
|
<div class="container">
|
|
<h2 class="section-title">淪陷瞬間</h2>
|
|
<p class="hwfp-lead">從出道、解散到多年後的驚喜合體，再走到現役四人體制——這是水晶男孩走了快三十年的路。</p>
|
|
<div class="row row-cols-2 row-cols-md-4 g-3">
|
|
<div class="col">
|
|
<div class="card hwfp-card h-100 text-center p-3">
|
|
<h3 class="h6 mb-1">1997</h3>
|
|
<p class="small mb-0">出道</p>
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<div class="card hwfp-card h-100 text-center p-3">
|
|
<h3 class="h6 mb-1">2000</h3>
|
|
<p class="small mb-0">解散</p>
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<div class="card hwfp-card h-100 text-center p-3">
|
|
<h3 class="h6 mb-1">2016</h3>
|
|
<p class="small mb-0">合體</p>
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<div class="card hwfp-card h-100 text-center p-3">
|
|
<h3 class="h6 mb-1">2019</h3>
|
|
<p class="small mb-0">現役四人</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="members" class="hwfp-section">
|
|
<div class="container">
|
|
<h2 class="section-title">完整的六顆</h2>
|
|
<p class="hwfp-lead">黑水晶負責 Rap 與舞蹈，白水晶撐起主唱線——六顆水晶各自發光，合體時更亮。</p>
|
|
<div class="row row-cols-2 row-cols-md-3 row-cols-lg-6 g-3">
|
|
<div class="col">
|
|
<div class="card hwfp-card h-100 text-center p-3">
|
|
<h3 class="h6 mb-1">殷志源</h3>
|
|
<p class="small mb-0">Leader・Rapper</p>
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<div class="card hwfp-card h-100 text-center p-3">
|
|
<h3 class="h6 mb-1">李宰鎮</h3>
|
|
<p class="small mb-0">Rapper・Dancer</p>
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<div class="card hwfp-card h-100 text-center p-3">
|
|
<h3 class="h6 mb-1">金在德</h3>
|
|
<p class="small mb-0">Rapper・Dancer</p>
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<div class="card hwfp-card h-100 text-center p-3">
|
|
<h3 class="h6 mb-1">姜成勳</h3>
|
|
<p class="small mb-0">Vocalist</p>
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<div class="card hwfp-card h-100 text-center p-3">
|
|
<h3 class="h6 mb-1">張水院</h3>
|
|
<p class="small mb-0">Vocalist</p>
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<div class="card hwfp-card h-100 text-center p-3">
|
|
<h3 class="h6 mb-1">高志溶</h3>
|
|
<p class="small mb-0">Vocalist</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="albums" class="hwfp-section">
|
|
<div class="container">
|
|
<h2 class="section-title">黃色留聲機</h2>
|
|
<p class="hwfp-lead">從出道專輯到合體回歸，聲音一路留下的痕跡。</p>
|
|
<div class="row justify-content-center">
|
|
<div class="col-12 col-lg-8">
|
|
<div id="carouselAlbums" class="carousel slide shadow-sm rounded overflow-hidden"
|
|
data-bs-ride="carousel">
|
|
<div class="carousel-indicators">
|
|
<button type="button" data-bs-target="#carouselAlbums" data-bs-slide-to="0"
|
|
class="active" aria-current="true" aria-label="1997"></button>
|
|
<button type="button" data-bs-target="#carouselAlbums" data-bs-slide-to="1"
|
|
aria-label="1998"></button>
|
|
<button type="button" data-bs-target="#carouselAlbums" data-bs-slide-to="2"
|
|
aria-label="1999"></button>
|
|
<button type="button" data-bs-target="#carouselAlbums" data-bs-slide-to="3"
|
|
aria-label="2016"></button>
|
|
</div>
|
|
<div class="carousel-inner">
|
|
<div class="carousel-item active">
|
|
<img src="../assets/images/albums/1997.jpg" class="d-block w-100" alt="1997 出道專輯">
|
|
<div class="carousel-caption d-none d-md-block">
|
|
<p>1997 · 出道</p>
|
|
</div>
|
|
</div>
|
|
<div class="carousel-item">
|
|
<img src="../assets/images/albums/1998.jpg" class="d-block w-100" alt="1998 專輯">
|
|
<div class="carousel-caption d-none d-md-block">
|
|
<p>1998</p>
|
|
</div>
|
|
</div>
|
|
<div class="carousel-item">
|
|
<img src="../assets/images/albums/1999.jpg" class="d-block w-100"
|
|
alt="1999 全盛期專輯">
|
|
<div class="carousel-caption d-none d-md-block">
|
|
<p>1999 · 全盛期</p>
|
|
</div>
|
|
</div>
|
|
<div class="carousel-item">
|
|
<img src="../assets/images/albums/2016.jpg" class="d-block w-100" alt="2016 合體專輯">
|
|
<div class="carousel-caption d-none d-md-block">
|
|
<p>2016 · 合體</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<button class="carousel-control-prev" type="button" data-bs-target="#carouselAlbums"
|
|
data-bs-slide="prev">
|
|
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
|
<span class="visually-hidden">上一張</span>
|
|
</button>
|
|
<button class="carousel-control-next" type="button" data-bs-target="#carouselAlbums"
|
|
data-bs-slide="next">
|
|
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
|
<span class="visually-hidden">下一張</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="concerts" class="hwfp-section">
|
|
<div class="container">
|
|
<h2 class="section-title">現場的震撼</h2>
|
|
<p class="hwfp-lead">巡迴現場的燈光與尖叫聲，是照片也留不住的那種震撼。</p>
|
|
<div class="row justify-content-center">
|
|
<div class="col-12 col-md-10">
|
|
<div id="carouselConcerts" class="carousel slide shadow-sm rounded overflow-hidden"
|
|
data-bs-ride="carousel">
|
|
<div class="carousel-indicators">
|
|
<button type="button" data-bs-target="#carouselConcerts" data-bs-slide-to="0"
|
|
class="active" aria-current="true" aria-label="2016"></button>
|
|
<button type="button" data-bs-target="#carouselConcerts" data-bs-slide-to="1"
|
|
aria-label="2017"></button>
|
|
<button type="button" data-bs-target="#carouselConcerts" data-bs-slide-to="2"
|
|
aria-label="2018"></button>
|
|
<button type="button" data-bs-target="#carouselConcerts" data-bs-slide-to="3"
|
|
aria-label="2020"></button>
|
|
</div>
|
|
<div class="carousel-inner">
|
|
<div class="carousel-item active">
|
|
<img src="../assets/images/concert/2016.jpg" class="d-block w-100" alt="2016 演唱會">
|
|
<div class="carousel-caption d-none d-md-block">
|
|
<p>2016 巡演</p>
|
|
</div>
|
|
</div>
|
|
<div class="carousel-item">
|
|
<img src="../assets/images/concert/2017.jpg" class="d-block w-100" alt="2017 演唱會">
|
|
<div class="carousel-caption d-none d-md-block">
|
|
<p>2017 巡演</p>
|
|
</div>
|
|
</div>
|
|
<div class="carousel-item">
|
|
<img src="../assets/images/concert/2018.jpg" class="d-block w-100" alt="2018 演唱會">
|
|
<div class="carousel-caption d-none d-md-block">
|
|
<p>2018 巡演</p>
|
|
</div>
|
|
</div>
|
|
<div class="carousel-item">
|
|
<img src="../assets/images/concert/2020.jpg" class="d-block w-100" alt="2020 演唱會">
|
|
<div class="carousel-caption d-none d-md-block">
|
|
<p>2020 巡演</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<button class="carousel-control-prev" type="button" data-bs-target="#carouselConcerts"
|
|
data-bs-slide="prev">
|
|
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
|
<span class="visually-hidden">上一張</span>
|
|
</button>
|
|
<button class="carousel-control-next" type="button" data-bs-target="#carouselConcerts"
|
|
data-bs-slide="next">
|
|
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
|
<span class="visually-hidden">下一張</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<p class="hwfp-cta"><a class="btn" href="../concert/concert.html">看完整場次整理 →</a></p>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="yellownote" class="hwfp-section">
|
|
<div class="container">
|
|
<h2 class="section-title">Yellow Note</h2>
|
|
<p class="hwfp-lead">推廣部的手記本，記錄視覺演進與追星足跡。</p>
|
|
<div class="row row-cols-1 row-cols-md-2 g-3">
|
|
<div class="col">
|
|
<div class="card hwfp-card p-3">
|
|
<h3 class="h6">視覺進化論</h3>
|
|
<p class="small mb-0">從好奇到全端，站主的自述與設計時間軸。</p>
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<div class="card hwfp-card p-3">
|
|
<h3 class="h6">聖地巡禮</h3>
|
|
<p class="small mb-0">台灣行程整理與地圖，成員足跡一覽。</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<p class="hwfp-tech-note">本頁使用 Bootstrap 5 完成導覽列、響應式格線、錨點導覽與輪播整合。</p>
|
|
|
|
</main>
|
|
|
|
<footer>
|
|
<p>SECHSKIES Fanpage © 2026 - 黃色氣球永遠飄揚</p>
|
|
<a href="https://jekkinoopy.github.io/Portfolio/" class="studio-link" target="_blank" rel="noopener noreferrer">
|
|
Design by <span class="mark_b">Jekkinoopy Studio</span>
|
|
</a>
|
|
</footer>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
|
|
<script src="../assets/js/particles.js"></script>
|
|
<script src="../assets/js/portal-nav.js"></script>
|
|
</body>
|
|
|
|
</html>
|