221 lines
8.4 KiB
HTML
221 lines
8.4 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>
|
||
<meta name="description" content="《超人回來了》高志溶與高昇材父子的台灣旅行特輯介紹與踩點地圖。">
|
||
<style>
|
||
:root{
|
||
--yellow:#ffd928;
|
||
--ink:#191919;
|
||
--paper:#fffdf4;
|
||
--soft:#f6f1df;
|
||
--line:#ded7bf;
|
||
--muted:#716b5b;
|
||
--white:#fff;
|
||
}
|
||
*{box-sizing:border-box}
|
||
html{scroll-behavior:smooth}
|
||
body{
|
||
margin:0;
|
||
font-family:"Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;
|
||
color:var(--ink);
|
||
background:
|
||
radial-gradient(circle at 15% 10%, rgba(255,217,40,.30), transparent 26rem),
|
||
linear-gradient(180deg,#fffdf5 0%,#fff 52%,#faf7ec 100%);
|
||
line-height:1.7;
|
||
}
|
||
a{color:inherit}
|
||
.wrap{width:min(1120px,calc(100% - 36px));margin:auto}
|
||
.topbar{
|
||
position:sticky;top:0;z-index:10;
|
||
background:rgba(255,253,244,.88);
|
||
backdrop-filter:blur(12px);
|
||
border-bottom:1px solid rgba(0,0,0,.08);
|
||
}
|
||
.topbar .wrap{
|
||
height:64px;display:flex;align-items:center;justify-content:space-between;gap:20px;
|
||
}
|
||
.brand{font-weight:900;letter-spacing:.03em}
|
||
.brand b{background:var(--yellow);padding:3px 7px;border-radius:5px}
|
||
.nav{display:flex;gap:18px;font-size:14px;font-weight:700}
|
||
.nav a{text-decoration:none}
|
||
.hero{padding:78px 0 52px}
|
||
.kicker{
|
||
display:inline-flex;align-items:center;gap:8px;
|
||
font-size:13px;font-weight:900;letter-spacing:.12em;
|
||
padding:7px 11px;border:1px solid var(--ink);border-radius:999px;background:var(--yellow);
|
||
}
|
||
.hero h1{
|
||
margin:20px 0 16px;
|
||
font-size:clamp(42px,8vw,92px);
|
||
line-height:.98;letter-spacing:-.055em;
|
||
max-width:900px;
|
||
}
|
||
.hero h1 span{display:block;color:#8a7400}
|
||
.hero p{max-width:720px;font-size:18px;color:#4e493e;margin:0}
|
||
.hero-meta{
|
||
display:flex;flex-wrap:wrap;gap:10px;margin-top:28px
|
||
}
|
||
.chip{
|
||
padding:7px 12px;border-radius:999px;background:#fff;border:1px solid var(--line);
|
||
font-size:13px;font-weight:800
|
||
}
|
||
.grid{
|
||
display:grid;grid-template-columns:1.05fr .95fr;gap:24px;margin-bottom:54px
|
||
}
|
||
.card{
|
||
background:rgba(255,255,255,.92);border:1px solid var(--line);
|
||
border-radius:24px;padding:28px;box-shadow:0 16px 40px rgba(63,50,0,.06)
|
||
}
|
||
.card h2{margin:0 0 12px;font-size:28px}
|
||
.card p{margin:0;color:#5f594c}
|
||
.quote{
|
||
height:100%;display:flex;flex-direction:column;justify-content:space-between;
|
||
background:var(--ink);color:var(--white);border-color:var(--ink)
|
||
}
|
||
.quote .big{font-size:clamp(28px,4vw,48px);line-height:1.22;font-weight:900;letter-spacing:-.035em}
|
||
.quote small{display:block;margin-top:22px;color:#d9d4c7}
|
||
.section{padding:22px 0 62px}
|
||
.section-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:20px}
|
||
.section h2{font-size:36px;margin:0;letter-spacing:-.03em}
|
||
.section-head p{margin:0;color:var(--muted);max-width:520px}
|
||
.timeline{
|
||
display:grid;grid-template-columns:repeat(3,1fr);gap:14px
|
||
}
|
||
.day{
|
||
border-top:5px solid var(--yellow);
|
||
background:var(--white);border-radius:0 0 18px 18px;padding:20px;
|
||
box-shadow:0 10px 24px rgba(0,0,0,.04)
|
||
}
|
||
.day b{font-size:12px;letter-spacing:.12em;color:#8a7400}
|
||
.day h3{margin:5px 0 8px;font-size:21px}
|
||
.day p{margin:0;color:#686153;font-size:14px}
|
||
.map-shell{
|
||
background:#111;border-radius:26px;padding:12px;
|
||
box-shadow:0 22px 50px rgba(0,0,0,.12)
|
||
}
|
||
.map-shell iframe{
|
||
display:block;width:100%;height:620px;border:0;border-radius:18px;background:#eee
|
||
}
|
||
.map-actions{
|
||
display:flex;justify-content:space-between;align-items:center;gap:12px;
|
||
padding:12px 8px 2px;color:#fff;font-size:13px
|
||
}
|
||
.map-actions a{
|
||
text-decoration:none;background:var(--yellow);color:var(--ink);
|
||
padding:8px 12px;border-radius:999px;font-weight:900
|
||
}
|
||
.notice{
|
||
margin-top:16px;font-size:12px;color:#7b7465
|
||
}
|
||
.footer{
|
||
border-top:1px solid var(--line);padding:28px 0 44px;color:#746d5e;font-size:13px
|
||
}
|
||
@media (max-width:760px){
|
||
.nav{display:none}
|
||
.hero{padding-top:54px}
|
||
.grid,.timeline{grid-template-columns:1fr}
|
||
.section-head{display:block}
|
||
.section-head p{margin-top:8px}
|
||
.map-shell iframe{height:500px}
|
||
.map-actions{align-items:flex-start;flex-direction:column}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<header class="topbar">
|
||
<div class="wrap">
|
||
<div class="brand"><b>SECHSKIES</b> YELLOW NOTE</div>
|
||
<nav class="nav">
|
||
<a href="#about">節目介紹</a>
|
||
<a href="#trip">台灣旅行</a>
|
||
<a href="#map">踩點地圖</a>
|
||
</nav>
|
||
</div>
|
||
</header>
|
||
|
||
<main>
|
||
<section class="hero wrap">
|
||
<span class="kicker">THE RETURN OF SUPERMAN × TAIWAN</span>
|
||
<h1>高高父子<br><span>遊台灣</span></h1>
|
||
<p>從《超人回來了》認識高志溶與高昇材，再沿著節目裡留下的足跡，把父子的三天台灣旅行重新走一遍。</p>
|
||
<div class="hero-meta">
|
||
<span class="chip">高志溶 KO JI YONG</span>
|
||
<span class="chip">高昇材 KO SEUNG JAE</span>
|
||
<span class="chip">父子旅行</span>
|
||
<span class="chip">台北・九份・北投・十分</span>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="about" class="wrap grid">
|
||
<article class="card">
|
||
<h2>《超人回來了》是什麼？</h2>
|
||
<p>節目把鏡頭放進爸爸與孩子的日常：沒有華麗設定，真正好看的往往是一起吃飯、旅行、鬧脾氣、和好，還有孩子一路長大的細節。高志溶與昇材的篇章，也因為父子之間一冷一熱、節奏完全不同，而留下非常鮮明的記憶點。</p>
|
||
</article>
|
||
<article class="card quote">
|
||
<div class="big">這不是單純的「偶像踩點」，而是一條可以重新看見父子關係的旅行線。</div>
|
||
<small>YELLOW NOTE / 高高父子台灣篇</small>
|
||
</article>
|
||
</section>
|
||
|
||
<section id="trip" class="section wrap">
|
||
<div class="section-head">
|
||
<div>
|
||
<span class="kicker">3 DAYS IN TAIWAN</span>
|
||
<h2>把節目變成一條真的路線</h2>
|
||
</div>
|
||
<p>下面先用三天的節奏理解整趟旅行，再直接進地圖看每個實際地點。</p>
|
||
</div>
|
||
|
||
<div class="timeline">
|
||
<article class="day">
|
||
<b>DAY 1</b>
|
||
<h3>台北市區・夜市</h3>
|
||
<p>桃園機場 → 西門 → 牛肉麵 → 旅店 → 士林夜市，先讓昇材用最直接的方式認識台灣。</p>
|
||
</article>
|
||
<article class="day">
|
||
<b>DAY 2</b>
|
||
<h3>校園・九份山城</h3>
|
||
<p>從師大周邊一路進九份，飲料、小吃與老街互動成為父子旅行裡最有生活感的一天。</p>
|
||
</article>
|
||
<article class="day">
|
||
<b>DAY 3</b>
|
||
<h3>北投・十分</h3>
|
||
<p>節奏慢下來，從溫泉一路走到十分老街，最後以天燈替三天旅程收尾。</p>
|
||
</article>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="map" class="section wrap">
|
||
<div class="section-head">
|
||
<div>
|
||
<span class="kicker">LOCATION ARCHIVE</span>
|
||
<h2>高高父子遊台灣地圖</h2>
|
||
</div>
|
||
<p>你原本整理的 Google My Maps 直接嵌進來，這頁可以當「節目介紹＋旅行入口」，細節仍回到完整地圖頁。</p>
|
||
</div>
|
||
|
||
<div class="map-shell">
|
||
<iframe
|
||
title="高高父子遊台灣 Google My Maps"
|
||
loading="lazy"
|
||
referrerpolicy="no-referrer-when-downgrade"
|
||
src="https://www.google.com/maps/d/embed?mid=1xpAsSoO8gNmMiW4x2sfkndISFTtjMQDw&hl=zh-TW&ehbc=2E312F">
|
||
</iframe>
|
||
<div class="map-actions">
|
||
<span>高高父子遊台灣｜SECHSKIES LOCATION ARCHIVE</span>
|
||
<a href="https://jekkinoopy.github.io/sechskies/yellow-note/map.html" target="_blank" rel="noopener">看完整景點列表 →</a>
|
||
</div>
|
||
</div>
|
||
<div class="notice">本頁為粉絲整理用途；節目名稱、人物與相關影像權利均屬原權利人。</div>
|
||
</section>
|
||
</main>
|
||
|
||
<footer class="footer">
|
||
<div class="wrap">SECHSKIES Fanpage © 2026 · 黃色氣球永遠飄揚</div>
|
||
</footer>
|
||
</body>
|
||
</html>
|