achmad
172 lines
8.6 KiB
HTML
172 lines
8.6 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Kotobane — Article Page Preview</title>
|
||
<style>
|
||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
body { background: #0D0D14; color: #F3F5F7; font-family: 'Inter', system-ui, sans-serif; font-size: 14px; }
|
||
|
||
nav { background: #171A21; border-bottom: 1px solid #2A3140; padding: 0 32px; height: 52px; display: flex; align-items: center; gap: 24px; }
|
||
.logo { font-size: 18px; font-weight: 800; color: #00B4D8; letter-spacing: 3px; }
|
||
.nav-divider { width: 1px; height: 16px; background: #2A3140; }
|
||
.nav-link { font-size: 12px; font-weight: 500; color: #7D8795; white-space: nowrap; }
|
||
.nav-link.active { color: #00B4D8; }
|
||
.kbd { background: #2A3140; border-radius: 3px; padding: 1px 5px; font-size: 10px; color: #7D8795; font-family: monospace; margin-left: auto; }
|
||
|
||
.article-wrap { max-width: 780px; margin: 0 auto; padding: 48px 32px; }
|
||
|
||
/* BREADCRUMB */
|
||
.breadcrumb { display: flex; align-items: center; gap: 8px; margin-bottom: 28px; font-size: 12px; color: #5C6470; }
|
||
.breadcrumb a { color: #7D8795; cursor: pointer; }
|
||
.breadcrumb a:hover { color: #00B4D8; }
|
||
.breadcrumb span { color: #2A3140; }
|
||
|
||
/* ARTICLE HEADER */
|
||
.article-cat { font-size: 10px; font-weight: 700; letter-spacing: 2px; color: #7D8795; text-transform: uppercase; margin-bottom: 14px; }
|
||
.article-title { font-size: 36px; font-weight: 700; line-height: 1.25; color: #F3F5F7; margin-bottom: 16px; }
|
||
.article-excerpt { font-size: 17px; color: #B8C0CC; line-height: 1.65; margin-bottom: 24px; font-weight: 400; }
|
||
.article-meta { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-top: 1px solid #2A3140; border-bottom: 1px solid #2A3140; margin-bottom: 32px; }
|
||
.article-meta-date { font-size: 12px; color: #7D8795; }
|
||
.article-meta-dot { width: 3px; height: 3px; border-radius: 50%; background: #2A3140; }
|
||
.article-meta-read { font-size: 12px; color: #7D8795; }
|
||
.badge { font-size: 9px; font-weight: 700; padding: 2px 8px; border-radius: 4px; letter-spacing: 0.5px; }
|
||
|
||
/* HERO IMAGE */
|
||
.article-hero-img { width: 100%; height: 400px; background: linear-gradient(135deg, #0D0D14 0%, #1a1730 50%, #0d1a2e 100%); border-radius: 12px; margin-bottom: 36px; display: flex; align-items: center; justify-content: center; }
|
||
.article-hero-img span { font-size: 12px; color: #2A3140; }
|
||
|
||
/* BODY */
|
||
.article-body { font-size: 16px; line-height: 1.8; color: #B8C0CC; }
|
||
.article-body p { margin-bottom: 20px; }
|
||
.article-body h2 { font-size: 22px; font-weight: 700; color: #F3F5F7; margin: 36px 0 16px; }
|
||
.article-body h3 { font-size: 17px; font-weight: 600; color: #F3F5F7; margin: 28px 0 12px; }
|
||
.article-body strong { color: #F3F5F7; font-weight: 600; }
|
||
.article-body blockquote { border-left: 3px solid #00B4D8; padding: 12px 20px; background: #1D212B; border-radius: 0 8px 8px 0; margin: 24px 0; }
|
||
.article-body blockquote p { margin: 0; color: #B8C0CC; font-style: italic; }
|
||
|
||
/* TAGS */
|
||
.article-tags { display: flex; flex-wrap: wrap; gap: 8px; padding: 28px 0; border-top: 1px solid #2A3140; margin-top: 32px; }
|
||
.tag { background: #1D212B; border: 1px solid #2A3140; color: #B8C0CC; font-size: 11px; padding: 4px 12px; border-radius: 6px; cursor: pointer; }
|
||
.tag:hover { border-color: #00B4D8; color: #00B4D8; }
|
||
|
||
/* RELATED */
|
||
.related { max-width: 780px; margin: 0 auto 48px; padding: 0 32px; }
|
||
.section-header { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
|
||
.section-title { font-size: 12px; font-weight: 700; color: #F3F5F7; letter-spacing: 1px; text-transform: uppercase; }
|
||
.section-line { flex: 1; height: 1px; background: #2A3140; }
|
||
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
|
||
.card { background: #1D212B; border: 1px solid #2A3140; border-radius: 12px; overflow: hidden; cursor: pointer; }
|
||
.card-img { height: 120px; background: linear-gradient(135deg, #0D0D14, #1a1730); }
|
||
.card-body { padding: 12px; }
|
||
.card-cat { font-size: 10px; font-weight: 600; color: #7D8795; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 6px; }
|
||
.card-title { font-size: 12px; font-weight: 600; color: #F3F5F7; line-height: 1.4; margin-bottom: 8px; }
|
||
.card-read { font-size: 11px; color: #00B4D8; font-weight: 600; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<nav>
|
||
<div class="logo">言羽</div>
|
||
<div class="nav-divider"></div>
|
||
<a class="nav-link active">Anime</a>
|
||
<a class="nav-link">VTubers</a>
|
||
<a class="nav-link">Manga</a>
|
||
<a class="nav-link">Games</a>
|
||
<a class="nav-link">Music</a>
|
||
<a class="nav-link">Japan</a>
|
||
<div class="kbd" style="margin-left:auto">⌘K</div>
|
||
</nav>
|
||
|
||
<div class="article-wrap">
|
||
|
||
<div class="breadcrumb">
|
||
<a>Home</a>
|
||
<span>›</span>
|
||
<a>Anime</a>
|
||
<span>›</span>
|
||
<span style="color:#7D8795">Frieren Season 2 Production Confirmed</span>
|
||
</div>
|
||
|
||
<div class="article-cat">Anime</div>
|
||
<h1 class="article-title">Frieren: Beyond Journey's End Season 2 Officially Announced — Production Already Underway at Madhouse</h1>
|
||
<p class="article-excerpt">The beloved fantasy series returns for a second cour. Studio Madhouse confirmed production is already underway, with the original staff and full cast returning.</p>
|
||
|
||
<div class="article-meta">
|
||
<span class="badge" style="background:#7C3AED;color:#fff">FEATURED</span>
|
||
<span class="badge" style="background:#D64545;color:#fff">TRENDING</span>
|
||
<div class="article-meta-dot"></div>
|
||
<span class="article-meta-date">28 May 2026</span>
|
||
<div class="article-meta-dot"></div>
|
||
<span class="article-meta-read">4 min read</span>
|
||
</div>
|
||
|
||
<div class="article-hero-img">
|
||
<span>Featured image from Directus assets</span>
|
||
</div>
|
||
|
||
<div class="article-body">
|
||
<p>Studio Madhouse has officially confirmed that <strong>Frieren: Beyond Journey's End</strong> will return for a second season. The announcement came via the series' official Twitter account and was accompanied by a short teaser image featuring the main cast.</p>
|
||
|
||
<h2>What We Know So Far</h2>
|
||
<p>According to the official announcement, the core production team remains unchanged. Director Keiichiro Saito and series composer Tomohiro Suzuki both confirmed their return, alongside the full original voice cast.</p>
|
||
|
||
<blockquote><p>"We're incredibly grateful for the response to the first season. We want to give the second the same care and time it deserves."<br>— Director Keiichiro Saito</p></blockquote>
|
||
|
||
<p>No release window has been confirmed yet, though industry sources suggest a late 2026 or early 2027 premiere is most likely given the production timeline.</p>
|
||
|
||
<h3>Production at Madhouse</h3>
|
||
<p>The series will again be animated at <strong>Madhouse</strong>, the studio behind acclaimed productions such as Death Note, Hunter x Hunter, and One Punch Man Season 1. The studio's scheduling suggests a full production cycle rather than a rushed turnaround.</p>
|
||
|
||
<h2>What Comes Next in the Story</h2>
|
||
<p>The first season adapted through the Granat arc. Season 2 is expected to begin with the Auberst arc and move into the series' most celebrated material, including the Lügner confrontation — widely considered the manga's peak so far.</p>
|
||
</div>
|
||
|
||
<div class="article-tags">
|
||
<div class="tag">frieren</div>
|
||
<div class="tag">madhouse</div>
|
||
<div class="tag">anime season 2</div>
|
||
<div class="tag">fantasy anime</div>
|
||
<div class="tag">2026 anime</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- RELATED -->
|
||
<div class="related">
|
||
<div class="section-header">
|
||
<div class="section-title">More from Anime</div>
|
||
<div class="section-line"></div>
|
||
</div>
|
||
<div class="grid-3">
|
||
<div class="card">
|
||
<div class="card-img"></div>
|
||
<div class="card-body">
|
||
<div class="card-cat">Anime</div>
|
||
<div class="card-title">Summer 2026 Season Preview: Every Series Ranked</div>
|
||
<div class="card-read">Read →</div>
|
||
</div>
|
||
</div>
|
||
<div class="card">
|
||
<div class="card-img" style="background:linear-gradient(135deg,#0d1a18,#152a26)"></div>
|
||
<div class="card-body">
|
||
<div class="card-cat">Anime</div>
|
||
<div class="card-title">Re:Zero Season 4 Production Officially Confirmed by White Fox</div>
|
||
<div class="card-read">Read →</div>
|
||
</div>
|
||
</div>
|
||
<div class="card">
|
||
<div class="card-img" style="background:linear-gradient(135deg,#1a1200,#2a1f00)"></div>
|
||
<div class="card-body">
|
||
<div class="card-cat">Anime</div>
|
||
<div class="card-title">Dungeon Meshi Season 2 — Confirmed for Winter 2027</div>
|
||
<div class="card-read">Read →</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</body>
|
||
</html>
|