jekkinoopy/sechskies
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style 調整調整圖片說明列

Browse Source
This commit is contained in:
jekkinoopy
2026-05-13 18:12:44 +08:00
parent 365a867b10
commit 03e36cc4d2
5 changed files with 122 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+23 -23
View File
@@ -12,8 +12,8 @@
</head>
<body>
<header id="origin">
<body class="home-page">
<!-- <header id="origin">
<div class="hero">
<h1>SECHSKIES<br>水晶男孩</h1>
<p>六顆永恆的水晶 • 左右命運的傳奇</p>
@@ -23,7 +23,7 @@
<nav class="portal-nav" aria-label="水晶男孩推廣部導覽" data-portal-nav></nav>
<canvas id="particles"></canvas>
<canvas id="particles"></canvas> -->
<div class="container">
@@ -31,10 +31,11 @@
<h2 class="section-title">好奇的開端</h2>
<div class="intro-text">
<p class="intro-text">
身為在回歸後才被這場 <span class="highlight">「黃色奇蹟」</span> 擊中的新一代粉絲，我深刻體會那種從好奇觀看到最終徹底淪陷的悸動。
身為在回歸後才被這場 <span class="mark_b mark_y">「黃色奇蹟」</span>
擊中的新一代粉絲，我深刻體會那種從好奇觀看到最終徹底淪陷的悸動。
</p>
<p class="core-description">
這段旅程始於 2016 年 4 月，透過國民綜藝《無限挑戰》的回歸企劃，讓原本不認識這組傳奇的我，因一時好奇點開節目。
這段旅程始於 2016 年 4 月，透過國民綜藝<span class="mark_b mark_y">《無限挑戰》</span>的回歸企劃，讓原本不認識這組傳奇的我，因一時好奇點開節目。
即便錯過了那個屬於他們的世紀末，但跟著節目的編排鋪陳，從歡笑到感動，我依然被那份熱血、真誠且專業的魅力所震撼。
</p>
<p class="call-to-action">
@@ -49,7 +50,7 @@
<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 class="arrow-icon" aria-hidden="true">↑</span>
設計語彙：六角、黃海與初心
</span>
</div>
@@ -57,26 +58,25 @@
<div class="mission-content">
<p>
本站是以 <span class="highlight">SECHSKIES 水晶男孩</span> 為核心的數位推廣部，旨在透過 <span
class="highlight">專業的視覺策展</span> 宣傳成員魅力與 <span
class="highlight">小黃們的應援活動</span>。我們不滿足於傳統的追星模式，而是嘗試以水晶男孩為 <span
class="highlight">靈感主軸</span>，延伸至 <span class="highlight">網頁開發、視覺設計與內容企劃</span>
等多重領域，將對偶像的喜愛轉化為 <span class="highlight">實質的專業養分</span>。在這裡，你不只能探索他們的 <span
class="highlight">傳奇軌跡</span>，更能見證追星如何激發 <span class="highlight">創作潛能</span>。
以推廣 <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="logo-concept">
<h3>LOGO 設計理念</h3>
<div class="logo-concept-media-row">
<p>
<span class="highlight">「晶」</span>字發想來自<span
class="highlight">六角形的水晶</span>，為了強調水晶男孩<span
class="highlight">初心為六人</span>。上半部形似<span class="highlight">數字
6</span>，搭配演唱會必備的<span class="highlight">手燈圖案</span>，代表粉絲和水晶<span
class="highlight">密不可分的關係</span>。色彩配置發想來自回歸舞台成員脫下眼罩的剎那，整個場地從<span
class="highlight highlight-stage-flash">一片漆黑瞬間發亮</span>，映入眼簾的是一片<span
class="highlight">黃色海洋</span>。以此片段為契機，設計成<span
class="highlight">黑色系與黃色系</span>的色彩搭配，來記錄那瞬間的感動。
<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 class="mission-moment-wrap">
<div class="mission-gif-frame" role="group" aria-label="回歸演唱會／黃色氣球海（16：9）">
@@ -84,7 +84,7 @@
<img src="./img/黃色海洋.gif" alt="無限挑戰 六六歌2 放送畫面：全場黃色氣球海">
</div>
<span class="caption">
<span class="arrow-icon" aria-hidden="true">↓</span>
<span class="arrow-icon" aria-hidden="true">↑</span>
回歸演唱會的動人瞬間-黃色氣球海
</span>
</div>
@@ -94,8 +94,8 @@
</div>
<div class="quote-box">
「我們要用這座<span class="highlight">藝廊般的網站</span>證明：追星的孩子不僅不會變壞，更會因為那份<span
class="highlight">守護的熱情</span>，讓現在的自己變得比追星前的自己還要厲害。」
我們要用這座<span class="mark_b">藝廊般的網站</span>證明：<br>追星的孩子不僅不會變壞，更會因為那份<span
class="mark_b">守護的熱情</span>，<br>讓現在的自己變得比追星前的自己還要厲害!
</div>
</section>