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

調整CSS 加入故事結構

Browse Source
This commit is contained in:
jekkinoopy
2026-04-16 16:24:28 +08:00
parent d5f7fcef6c
commit ca63256065
2 changed files with 349 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+228 -37
View File
@@ -1,36 +1,72 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="zh-TW"> <html lang="zh-TW">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SECHSKIES - 水晶男孩傳奇介紹</title> <title>SECHSKIES - 水晶男孩傳奇介紹</title>
<style> <style>
/* 基本樣式與應援色設定 */ /* 基本樣式與應援色設定 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100..900&display=swap');
:root { :root {
--yellow: #FFD700; /* 應援黃色 */ --yellow: #FFD700;
--dark-yellow: #CCAC00; /* 應援黃色 */
--dark-yellow: #4e492b;
--black: #1a1a1a; --black: #1a1a1a;
--gray: #f4f4f4; --gray: #f4f4f4;
--text-color: #333; --text-color: #333;
--dark: #777;
--accent: #FFD700;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
background: #0A0A0A;
min-height: 100%;
} }
body { body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-family: 'Noto Sans TC', system-ui, sans-serif;
line-height: 1.6;
margin: 0;
color: var(--text-color); color: var(--text-color);
background-color: var(--gray); line-height: 1.6;
overflow-x: hidden;
}
header {
aspect-ratio: 1920 / 1080;
width: 100%;
background-image: url(https://img.notionusercontent.com/s3/prod-files-secure%2Fccf08452-292a-43c3-8c9f-4986a4da6a61%2F731a1fb5-9a8a-4e84-ae2f-66cac6fb9368%2FScreenShot-VideoID-m7Zt_p9S-yg-TimeS-320.png/size/w=2000?exp=1776407268&sig=yy-Y4-ADSuaz90ICllLf1KjrpCY3U54_nJKdb6sgQ_4&id=f027533f-efc3-42ed-a1ee-11796ec2efcf&table=block&userId=799a0c31-3a26-4ea6-8a75-05240b21c195);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
/* position: relative; */
overflow: hidden;
margin: 0;
padding: 0;
vertical-align: bottom; /* 消除某些瀏覽器對區塊元素的底邊留白 */
} }
/* 導覽列 */ /* 導覽列 */
nav { nav {
background-color: var(--black); background-color: var(--black);
padding: 1rem; padding: 0.5rem;
position: sticky; position: sticky;
top: 0; top: 0;
z-index: 1000; z-index: 1000;
display: flex; display: flex;
justify-content: center; justify-content: center;
margin: 0;
} }
nav a { nav a {
@@ -45,26 +81,50 @@
color: white; color: white;
} }
#particles {
position: absolute;
left: 0;
width: 100%;
display: block;
z-index: 1;
pointer-events: none;
}
/* 橫幅 Hero Section */ /* 橫幅 Hero Section */
.hero { .hero {
background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), z-index: 2;
url('https://upload.wikimedia.org/wikipedia/commons/4/4b/Sechskies_at_Yellow_Universe_exhibition.jpg') center/cover; position: relative;
height: 60vh; width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: var(--yellow);
text-align: center;
border-bottom: 8px solid var(--yellow);
} }
.hero h1 { .hero h1 {
font-size: 4rem; font-size: 2.5rem;
margin-bottom: 10px; line-height: 1.2;
letter-spacing: 5px; color: var(--yellow);
text-shadow: 2px 2px 10px rgba(0,0,0,0.5); text-shadow: 0 0 30px rgba(255,221,0,0.8);
margin-bottom: 0.5rem;
} }
.hero p {
font-size: 1.2rem;
margin-bottom: 2rem;
color: var(--gray);
}
.btn {
display: inline-block;
padding: 10px 30px;
background: var(--yellow);
color: #000;
font-weight: bold;
border-radius: 50px;
text-decoration: none;
transition: all 0.3s;
}
.btn:hover {
transform: scale(1.1);
background: #FFEE66;
}
/* 區塊容器 */ /* 區塊容器 */
.container { .container {
@@ -72,13 +132,36 @@
margin: 0 auto; margin: 0 auto;
padding: 40px 20px; padding: 40px 20px;
} }
.story-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 40px;
max-width: 1200px;
margin: 0 auto;
}
.card {
/* background: rgba(0, 0, 0, 0.85); */
border-radius: 20px;
padding: 30px;
transition: transform 0.4s, box-shadow 0.4s;
}
.card:hover {
transform: translateY(-15px);
box-shadow: 0 5px 5px rgba(255,221,0,0.2);
}
.card h3 {
color: var(--yellow);
margin-bottom: 15px;
}
section { section {
margin-bottom: 60px; margin-bottom: 60px;
background: white; background: rgba(255, 255, 255, 0.95);
padding: 30px; padding: 30px;
border-radius: 15px; border-radius: 15px;
box-shadow: 0 10px 20px rgba(0,0,0,0.05); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
position: relative;
z-index: 10;
} }
h2 { h2 {
@@ -107,6 +190,11 @@
text-align: center; text-align: center;
} }
a {
color: var(--text-color);
text-decoration: none;
}
/* 現在的故事線樣式 */ /* 現在的故事線樣式 */
.timeline { .timeline {
border-left: 3px solid var(--yellow); border-left: 3px solid var(--yellow);
@@ -146,29 +234,51 @@
} }
</style> </style>
</head> </head>
<body>
<body>
<header>
<div class="hero">
<h1>SECHSKIES<br>水晶男孩</h1>
<p>六顆永恆的水晶 • 左右命運的傳奇</p>
<a href="#story" class="btn">探索他們的故事</a>
</div>
</header>
<nav> <nav>
<a href="#background">故事背景</a> <a href="#background">故事背景</a>
<a href="#albums">歷年作品</a> <a href="#albums">歷年作品</a>
<a href="#current">現在故事線</a> <a href="#current">現在故事線</a>
</nav> </nav>
<header class="hero"> <canvas id="particles"></canvas>
<h1>SECHSKIES</h1>
<p>水晶男孩 - 一代 K-POP 傳奇的復活</p>
</header>
<div class="container"> <div class="container">
<section id="background"> <section id="background">
<h2>故事背景</h2> <h2>故事背景</h2>
<p> <p>
<span class="highlight">SECHSKIES（水晶男孩）</span> 於 1997 年 4 月 15 日出道，是韓國第一代頂尖男子團體。隊名在德語中意為「六顆水晶」，代表六位成員。 <span class="highlight">SECHSKIES（水晶男孩）</span> 於 1997 年 4 月 15 日出道，是韓國第一代頂尖男子團體。隊名在德語中意為「六顆水晶」，代表六位成員。
</p> </p>
<p> <p>
他們在 90 年代末與 H.O.T 並稱為 K-POP 的兩大山脈。然而，在事業巔峰期的 2000 年 5 月，團體突然宣佈解散，成為當時韓國演藝界最震撼的消息。解散後的 16 年間，成員各自在不同領域發展，但「小黃（粉絲暱稱）」們從未忘記那片黃色氣球海。 他們在 90 年代末與 H.O.T 並稱為 K-POP 的兩大山脈。然而，在事業巔峰期的 2000 年 5 月，團體突然宣佈解散，成為當時韓國演藝界最震撼的消息。解散後的 16
年間，成員各自在不同領域發展，但「小黃（粉絲暱稱）」們從未忘記那片黃色氣球海。
</p> </p>
<div class="story-grid">
<div class="card">
<h3>出道與巔峰（1997-2000）</h3>
<p>1997年4月15日，水晶男孩以《學園別曲》正式出道，是韓國第一代偶像團體，與H.O.T.並稱為90年代後期兩大山脈。團名源自德語「六顆水晶」，象徵六位成員能左右命運。</p>
<p>分為「黑水晶」（殷志源、李宰鎮、金在德 — Rap與舞蹈）和「白水晶」（姜成勳、高志溶、張水院 — 主唱）。</p>
</div>
<div class="card">
<h3>解散與重逢（2000-2016）</h3>
<p>2000年5月20日正式解散，成員各自發展。2016年4月14日，時隔16年在《無限挑戰》「六六歌」特輯驚喜合體，引起巨大迴響。</p>
</div>
<div class="card">
<h3>YG時期與現在</h3>
<p>2016年5月，除高志溶外五人與YG娛樂簽約重啟活動。2019年起調整為四人組合（殷志源、李宰鎮、金在德、張水院），繼續以經典魅力感動粉絲。</p>
</div>
</div>
</section> </section>
<section id="albums"> <section id="albums">
@@ -199,10 +309,12 @@
</tr> </tr>
<tr> <tr>
<td>2016</td> <td>2016</td>
<a href="lyrics.html"> <td>
<td>數位單曲</td> <a href="lyrics.html">數位單曲</a>
</a> </td>
<td>Three Words (三個詞)</td> <td>
<a href="lyrics.html">Three Words (三個詞)</a>
</td>
</tr> </tr>
<tr> <tr>
<td>2017</td> <td>2017</td>
@@ -239,8 +351,87 @@
</div> </div>
<footer> <footer>
<p>SECHSKIES Fanpage &copy; 2024 - 黃色氣球永遠飄揚</p> <p>SECHSKIES Fanpage &copy; 2026 - 黃色氣球永遠飄揚</p>
</footer> </footer>
<!-- 粒子效果 -->
<script>
// 根據圖片比例 (1920:1080) 調整 header 高度
const header = document.querySelector('header');
function setHeaderHeight() {
const width = window.innerWidth;
const height = width * (1080 / 1920);
header.style.height = height + 'px';
}
// 確保在 DOM 完全載入後執行
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', setHeaderHeight);
} else {
setHeaderHeight();
}
window.addEventListener('resize', setHeaderHeight);
window.addEventListener('load', setHeaderHeight);
const canvas = document.getElementById('particles');
const ctx = canvas.getContext('2d');
const container = canvas.nextElementSibling;
function resizeCanvas() {
canvas.width = window.innerWidth;
canvas.height = container.offsetHeight;
}
resizeCanvas();
let particles = [];
class Particle {
constructor() {
this.x = Math.random() * canvas.width;
this.y = Math.random() * canvas.height;
this.size = Math.random() * 4 + 1;
this.speedX = Math.random() * 0.5 - 0.25;
this.speedY = Math.random() * 0.5 + 0.2;
}
update() {
this.x += this.speedX;
this.y += this.speedY;
if (this.y > canvas.height) this.y = 0;
}
draw() {
ctx.fillStyle = '#FFDD00';
ctx.globalAlpha = 0.6;
ctx.beginPath();
ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
ctx.fill();
}
}
function init() {
particles = [];
for (let i = 0; i < 80; i++) {
particles.push(new Particle());
}
}
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (let p of particles) {
p.update();
p.draw();
}
requestAnimationFrame(animate);
}
window.addEventListener('resize', () => {
resizeCanvas();
init();
});
init();
animate();
</script>
</body> </body>
</html> </html>
lyrics.html
+121 -68
View File
@@ -8,6 +8,7 @@
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style> <style>
:root { :root {
/* 定義一個基礎大小，這就是你的「倍率開關」 */ /* 定義一個基礎大小，這就是你的「倍率開關」 */
@@ -24,7 +25,6 @@
margin: 10%; margin: 10%;
background-color: #333333; background-color: #333333;
color: #ffffff; color: #ffffff;
} }
h1 { h1 {
@@ -33,6 +33,13 @@
/* 想要這區特別大一點就設 2.5 */ /* 想要這區特別大一點就設 2.5 */
} }
.main-left {
width: 50%;
vertical-align: top;
gap: 1rem;
/* padding-right: 40px; */
}
.songInfo { .songInfo {
color: #FAEAB1; color: #FAEAB1;
display: grid; display: grid;
@@ -55,79 +62,125 @@
/* 原本的 8px 大約是 0.5rem */ /* 原本的 8px 大約是 0.5rem */
font-size: 1.5rem; font-size: 1.5rem;
/* 想要這區特別大一點就設 1.2 */ /* 想要這區特別大一點就設 1.2 */
margin: auto;
}
table {
border-spacing: 40px;
/* 左右間距 20px，上下 0 */
border-collapse: separate;
/* 必須是 separate，spacing 才會生效 */
}
table,
td {
/* width: 100%; */
/* border:#fff solid 1px; */
}
a{
color: #FFF;
text-decoration: none;
}
.contact i {
font-size: 0.6em;
margin-right: 0.3rem;
} }
</style> </style>
</head> </head>
<body class="nanum-pen-script-regular"> <body class="nanum-pen-script-regular">
<h1>세 단어 (THREE WORDS)</h1> <h1>세 단어 (THREE WORDS)</h1>
<iframe width="705" height="397" src="https://www.youtube.com/embed/m7Zt_p9S-yg" <table>
title="SECHSKIES - ‘세 단어 (THREE WORDS)’ M/V" frameborder="0" <tr>
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" <td <div class="main-left">
referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe> <iframe width="100%" style="aspect-ratio: 16 / 9;" src="https://www.youtube.com/embed/m7Zt_p9S-yg"
<iframe width="932" height="533" src="https://www.youtube.com/embed/6YsNTCPwhbg" title="SECHSKIES 水晶男孩 - THREE WORDS/三個詞 (세 단어) [中字]" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe> title="SECHSKIES - ‘세 단어 (THREE WORDS)’ M/V" frameborder="0"
<iframe width="932" height="533" src="https://www.youtube.com/embed/Xn92QTW7ywE" title="【繁中】SECHSKIES - 세 단어 (THREE WORDS)" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe> allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
<dl class="songInfo"> referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
<dt>Artist</dt> <dl class="songInfo">
<dd>SECHSKIES</dd> <dt>Artist</dt>
<dt>Album</dt> <dd>SECHSKIES</dd>
<dd>2016 Re-ALBUM</dd> <dt>Album</dt>
<dt>Release Date</dt> <dd>2016 Re-ALBUM</dd>
<dd>2016년</dd> <dt>Release Date</dt>
<dt>Genre</dt> <dd>2016년</dd>
<dd>K-Pop</dd> <dt>Genre</dt>
</dl> <dd>K-Pop</dd>
<p>다신 볼 수 없을 것만 같던<br> </dl>
그대가 내 앞에 서 있네요<br> </div>
지킬 수 있을지 모르며 약속했던<br> </td>
그 언젠가가 지금인 거군요<br> <td>
단 하루도 널, 널 잊었던 적<br> <p>다신 볼 수 없을 것만 같던<br>
없다는 말은 거짓말이겠지만<br> 그대가 내 앞에 서 있네요<br>
그대가 곁에 있지 않을 때 외로웠죠 (외로웠죠)<br> 지킬 수 있을지 모르며 약속했던<br>
한 순간도 널, 널 잊었던 적<br> 그 언젠가가 지금인 거군요<br>
없다는 말이 무슨 의미겠어요<br> 단 하루도 널, 널 잊었던 적<br>
지금 여기 우리 세 단어면 돼요<br> 없다는 말은 거짓말이겠지만<br>
I just wanna be with you<br> 그대가 곁에 있지 않을 때 외로웠죠 (외로웠죠)<br>
내가 사는 이유<br> 한 순간도 널, 널 잊었던 적<br>
다시는 멀리 가지 않을게요<br> 없다는 말이 무슨 의미겠어요<br>
I'll always be here for you<br> 지금 여기 우리 세 단어면 돼요<br>
세월이 지난 후<br> I just wanna be with you<br>
세상이 다시 우릴 갈라놔도<br> 내가 사는 이유<br>
떠나야만 해도<br> 다시는 멀리 가지 않을게요<br>
멀리 있진 않을게요 uh<br> I'll always be here for you<br>
참 멀리 멀리 멀리도 돌아왔네요<br> 세월이 지난 후<br>
지독한 세월과 세상에게 수없이 꺾이고 (꺾이고)<br> 세상이 다시 우릴 갈라놔도<br>
발밑엔 낙엽이 뒤덮이고 이 야윈 모습이지만<br> 떠나야만 해도<br>
여기 여전히 그대 곁에 서있죠<br> 멀리 있진 않을게요 uh<br>
I missed you 한 순간도 편히 잠든 적 없어 (없어)<br> 참 멀리 멀리 멀리도 돌아왔네요<br>
잘 지낸 것 같겠지만 I missed you<br> 지독한 세월과 세상에게 수없이 꺾이고 (꺾이고)<br>
한 순간도 진짜 웃은 적 없어 (없어)<br> 발밑엔 낙엽이 뒤덮이고 이 야윈 모습이지만<br>
한 순간도 널, 널 잊었던 적<br> 여기 여전히 그대 곁에 서있죠<br>
없다는 말이 무슨 의미겠어요<br> I missed you 한 순간도 편히 잠든 적 없어 (없어)<br>
지금 여기 우리 세 단어면 돼요<br> 잘 지낸 것 같겠지만 I missed you<br>
I just wanna be with you<br> 한 순간도 진짜 웃은 적 없어 (없어)<br>
내가 사는 이유<br> 한 순간도 널, 널 잊었던 적<br>
다시는 멀리 가지 않을게요<br> 없다는 말이 무슨 의미겠어요<br>
I'll always be here for you<br> 지금 여기 우리 세 단어면 돼요<br>
세월이 지난 후<br> I just wanna be with you<br>
세상이 다시 우릴 갈라놔도<br> 내가 사는 이유<br>
떠나야만 해도<br> 다시는 멀리 가지 않을게요<br>
멀리 있진 않을게요<br> I'll always be here for you<br>
시간은 참 무섭게도 가네요<br> 세월이 지난 후<br>
붙잡으려 해도 잡히지 않을 거예요<br> 세상이 다시 우릴 갈라놔도<br>
언젠가 다시 헤어지게 되어도<br> 떠나야만 해도<br>
여기 가까이 서있을게<br> 멀리 있진 않을게요<br>
지금 여기 우리<br> 시간은 참 무섭게도 가네요<br>
I just wanna be with you<br> 붙잡으려 해도 잡히지 않을 거예요<br>
내가 사는 이유 (miss you baby)<br> 언젠가 다시 헤어지게 되어도<br>
다시는 멀리 가지 않을게요 (가지 않을게요)<br> 여기 가까이 서있을게<br>
I'll always be here for you<br> 지금 여기 우리<br>
세월이 지난 후<br> I just wanna be with you<br>
세상이 다시 우릴 갈라놔도 (우릴 갈라놔도)<br> 내가 사는 이유 (miss you baby)<br>
떠나야만 해도 (떠나야만 해도)<br> 다시는 멀리 가지 않을게요 (가지 않을게요)<br>
멀리 (멀리) 있진 않을게요<br> I'll always be here for you<br>
멀리 있진 않을게<br> 세월이 지난 후<br>
</p> 세상이 다시 우릴 갈라놔도 (우릴 갈라놔도)<br>
떠나야만 해도 (떠나야만 해도)<br>
멀리 (멀리) 있진 않을게요<br>
멀리 있진 않을게<br>
</p>
</td>
</tr>
<tr>
<td><iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3163.2574996244366!2d126.9052587762962!3d37.54899662513289!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x357c992bb3f6a887%3A0x6058954f87325221!2sYG%20Entertainment!5e0!3m2!1szh-TW!2stw!4v1776239000614!5m2!1szh-TW!2stw"
width="100%" style="aspect-ratio: 16 / 9; border:0;" allowfullscreen="" loading="lazy"
referrerpolicy="no-referrer-when-downgrade"></iframe></td>
<td>
<div class="contact">
<img src="https://ygfamily.com/home/assets/images/f_logo.svg" alt="">
<h3>YG Entertainment</h3>
<i class="fa-solid fa-map-location-dot"></i> Huiujeong-ro 1-gil, Mapo-gu, Seoul, South Korea <br>
<i class="fas fa-globe"></i> <a href="https://www.ygfamily.com/" target="_blank">https://www.ygfamily.com/</a><br>
<i class="fas fa-phone"></i> +82231421104
</div>
</td>
</tr>
</table>
</body> </body>