achmad
261 lines
14 KiB
HTML
261 lines
14 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 — Homepage 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 */
|
|
nav { background: #171A21; border-bottom: 1px solid #2A3140; padding: 0 32px; height: 52px; display: flex; align-items: center; gap: 28px; position: sticky; top: 0; z-index: 10; }
|
|
.logo { font-size: 18px; font-weight: 800; color: #00B4D8; letter-spacing: 3px; margin-right: 8px; }
|
|
.nav-divider { width: 1px; height: 16px; background: #2A3140; }
|
|
.nav-link { font-size: 12px; font-weight: 500; color: #7D8795; cursor: pointer; transition: color 0.15s; white-space: nowrap; }
|
|
.nav-link.active { color: #00B4D8; border-bottom: 2px solid #00B4D8; padding-bottom: 2px; }
|
|
.nav-link:hover { color: #B8C0CC; }
|
|
.nav-search { margin-left: auto; display: flex; align-items: center; gap: 6px; background: #1D212B; border: 1px solid #2A3140; border-radius: 6px; padding: 5px 10px; cursor: pointer; }
|
|
.nav-search span { font-size: 11px; color: #5C6470; }
|
|
.kbd { background: #2A3140; border-radius: 3px; padding: 1px 5px; font-size: 10px; color: #7D8795; font-family: monospace; }
|
|
|
|
/* HERO */
|
|
.hero { display: grid; grid-template-columns: 1fr 380px; gap: 2px; max-width: 1200px; margin: 32px auto; padding: 0 32px; }
|
|
.hero-main { background: #1D212B; border-radius: 16px 0 0 16px; overflow: hidden; position: relative; min-height: 420px; display: flex; flex-direction: column; justify-content: flex-end; }
|
|
.hero-img { position: absolute; inset: 0; background: linear-gradient(135deg, #0D0D14 0%, #1a1730 50%, #0d1a2e 100%); }
|
|
.hero-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, #0D0D14 0%, transparent 60%); }
|
|
.hero-content { position: relative; z-index: 1; padding: 28px; }
|
|
.hero-badges { display: flex; gap: 8px; margin-bottom: 14px; }
|
|
.badge { font-size: 10px; font-weight: 700; padding: 3px 10px; border-radius: 4px; letter-spacing: 0.5px; }
|
|
.badge-featured { background: #7C3AED; color: #fff; }
|
|
.badge-category { background: transparent; border: 1px solid #2A3140; color: #7D8795; }
|
|
.hero-title { font-size: 26px; font-weight: 700; line-height: 1.3; margin-bottom: 10px; color: #F3F5F7; }
|
|
.hero-excerpt { font-size: 13px; color: #B8C0CC; line-height: 1.6; margin-bottom: 16px; }
|
|
.hero-meta { font-size: 11px; color: #5C6470; display: flex; gap: 12px; align-items: center; }
|
|
.hero-read { font-size: 12px; color: #00B4D8; font-weight: 600; margin-left: auto; }
|
|
|
|
.hero-stack { display: flex; flex-direction: column; gap: 2px; }
|
|
.hero-side { background: #1D212B; padding: 18px; flex: 1; display: flex; flex-direction: column; justify-content: flex-end; position: relative; overflow: hidden; }
|
|
.hero-side:first-child { border-radius: 0 16px 0 0; }
|
|
.hero-side:last-child { border-radius: 0 0 16px 0; }
|
|
.hero-side-img { position: absolute; inset: 0; background: linear-gradient(135deg, #0d1a2e 0%, #1a1730 100%); opacity: 0.7; }
|
|
.hero-side-content { position: relative; z-index: 1; }
|
|
.hero-side-title { font-size: 13px; font-weight: 600; color: #F3F5F7; line-height: 1.4; margin: 8px 0 6px; }
|
|
.hero-side-meta { font-size: 10px; color: #5C6470; }
|
|
|
|
/* SECTIONS */
|
|
.section { max-width: 1200px; margin: 0 auto 40px; padding: 0 32px; }
|
|
.section-header { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
|
|
.section-title { font-size: 13px; font-weight: 700; color: #F3F5F7; letter-spacing: 1px; text-transform: uppercase; }
|
|
.section-line { flex: 1; height: 1px; background: #2A3140; }
|
|
.section-more { font-size: 11px; color: #00B4D8; font-weight: 600; cursor: pointer; white-space: nowrap; }
|
|
|
|
/* ARTICLE GRID */
|
|
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
|
|
.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; transition: border-color 0.15s; }
|
|
.card:hover { border-color: #3a4560; }
|
|
.card-img { height: 140px; background: linear-gradient(135deg, #0D0D14 0%, #1a1730 100%); }
|
|
.card-img.games { background: linear-gradient(135deg, #1a1200 0%, #2a1f00 100%); }
|
|
.card-img.vtubers { background: linear-gradient(135deg, #120d1a 0%, #1e1530 100%); }
|
|
.card-img.manga { background: linear-gradient(135deg, #1a0d0d 0%, #2a1515 100%); }
|
|
.card-img.music { background: linear-gradient(135deg, #0d1a18 0%, #152a26 100%); }
|
|
.card-body { padding: 14px; }
|
|
.card-meta { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
|
|
.card-cat { font-size: 10px; font-weight: 600; color: #7D8795; letter-spacing: 1px; text-transform: uppercase; }
|
|
.card-title { font-size: 13px; font-weight: 600; color: #F3F5F7; line-height: 1.4; margin-bottom: 8px; }
|
|
.card-excerpt { font-size: 11px; color: #7D8795; line-height: 1.5; margin-bottom: 10px; }
|
|
.card-footer { display: flex; justify-content: space-between; align-items: center; }
|
|
.card-date { font-size: 10px; color: #5C6470; }
|
|
.card-read { font-size: 11px; color: #00B4D8; font-weight: 600; }
|
|
|
|
/* WIDE CARD */
|
|
.card-wide { background: #1D212B; border: 1px solid #2A3140; border-radius: 12px; display: flex; overflow: hidden; cursor: pointer; }
|
|
.card-wide-img { width: 180px; flex-shrink: 0; background: linear-gradient(135deg, #0D0D14, #1a1730); }
|
|
.card-wide-body { padding: 16px; display: flex; flex-direction: column; justify-content: space-between; flex: 1; }
|
|
|
|
/* TICKER */
|
|
.ticker { background: #171A21; border-top: 1px solid #2A3140; border-bottom: 1px solid #2A3140; padding: 8px 32px; display: flex; align-items: center; gap: 16px; overflow: hidden; margin-bottom: 32px; }
|
|
.ticker-label { background: #00B4D8; color: #000; font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 3px; white-space: nowrap; letter-spacing: 0.5px; }
|
|
.ticker-items { display: flex; gap: 24px; overflow: hidden; }
|
|
.ticker-item { font-size: 11px; color: #B8C0CC; white-space: nowrap; display: flex; align-items: center; gap: 8px; }
|
|
.ticker-dot { width: 3px; height: 3px; border-radius: 50%; background: #2A3140; flex-shrink: 0; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- NAV -->
|
|
<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>
|
|
<a class="nav-link">Culture</a>
|
|
<a class="nav-link">Industry</a>
|
|
<div class="nav-search">
|
|
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#5C6470" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>
|
|
<span>Search</span>
|
|
<div class="kbd">⌘K</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- NEWS TICKER -->
|
|
<div class="ticker">
|
|
<div class="ticker-label">LATEST</div>
|
|
<div class="ticker-items">
|
|
<div class="ticker-item">Hololive EN Gen 4 debuts announced <div class="ticker-dot"></div></div>
|
|
<div class="ticker-item">Blue Protocol global release date confirmed <div class="ticker-dot"></div></div>
|
|
<div class="ticker-item">Chainsaw Man Part 3 begins serialization <div class="ticker-dot"></div></div>
|
|
<div class="ticker-item">Yoasobi world tour dates revealed <div class="ticker-dot"></div></div>
|
|
<div class="ticker-item">Summer 2026 anime season preview</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- HERO -->
|
|
<div class="hero">
|
|
<div class="hero-main">
|
|
<div class="hero-img"></div>
|
|
<div class="hero-content">
|
|
<div class="hero-badges">
|
|
<span class="badge badge-featured">FEATURED</span>
|
|
<span class="badge badge-category">ANIME</span>
|
|
</div>
|
|
<div class="hero-title">Frieren: Beyond Journey's End Season 2 Officially Announced — Production Already Underway at Madhouse</div>
|
|
<div class="hero-excerpt">The beloved fantasy series returns for a second cour. Studio Madhouse confirmed production is already underway, with original staff and cast returning in full.</div>
|
|
<div class="hero-meta">
|
|
<span>28 May 2026</span>
|
|
<span>·</span>
|
|
<span>4 min read</span>
|
|
<span class="hero-read">Read article →</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="hero-stack">
|
|
<div class="hero-side">
|
|
<div class="hero-side-img"></div>
|
|
<div class="hero-side-content">
|
|
<div style="display:flex;gap:6px;align-items:center">
|
|
<span class="badge" style="background:#D64545;color:#fff;font-size:9px;padding:2px 6px">TRENDING</span>
|
|
<span style="font-size:10px;color:#7D8795;font-weight:600;letter-spacing:1px">VTUBERS</span>
|
|
</div>
|
|
<div class="hero-side-title">Hololive EN Gen 4 — Full Lineup and Debut Schedule Revealed</div>
|
|
<div class="hero-side-meta">27 May 2026 · 3 min read</div>
|
|
</div>
|
|
</div>
|
|
<div class="hero-side">
|
|
<div class="hero-side-img" style="background:linear-gradient(135deg,#1a1200,#2a1f00);opacity:0.7"></div>
|
|
<div class="hero-side-content">
|
|
<div style="display:flex;gap:6px;align-items:center">
|
|
<span class="badge" style="background:#FFB300;color:#000;font-size:9px;padding:2px 6px">NEW</span>
|
|
<span style="font-size:10px;color:#7D8795;font-weight:600;letter-spacing:1px">GAMES</span>
|
|
</div>
|
|
<div class="hero-side-title">Blue Protocol Global Launch: Everything You Need to Know</div>
|
|
<div class="hero-side-meta">26 May 2026 · 6 min read</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- LATEST -->
|
|
<div class="section">
|
|
<div class="section-header">
|
|
<div class="section-title">Latest</div>
|
|
<div class="section-line"></div>
|
|
<div class="section-more">See all →</div>
|
|
</div>
|
|
<div class="grid-4">
|
|
<div class="card">
|
|
<div class="card-img vtubers"></div>
|
|
<div class="card-body">
|
|
<div class="card-meta">
|
|
<span class="card-cat">VTubers</span>
|
|
<span class="badge" style="background:#D64545;color:#fff;font-size:9px;padding:1px 5px">TRENDING</span>
|
|
</div>
|
|
<div class="card-title">Nijisanji EN Announces Three New Wave Members</div>
|
|
<div class="card-footer"><span class="card-date">28 May</span><span class="card-read">Read →</span></div>
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-img manga"></div>
|
|
<div class="card-body">
|
|
<div class="card-meta"><span class="card-cat">Manga</span></div>
|
|
<div class="card-title">Chainsaw Man Part 3 First Chapter Review: Fujimoto Raises the Stakes</div>
|
|
<div class="card-footer"><span class="card-date">27 May</span><span class="card-read">Read →</span></div>
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-img games"></div>
|
|
<div class="card-body">
|
|
<div class="card-meta"><span class="card-cat">Games</span></div>
|
|
<div class="card-title">Elden Ring DLC Shadow of the Erdtree — Final Sales Numbers Released</div>
|
|
<div class="card-footer"><span class="card-date">27 May</span><span class="card-read">Read →</span></div>
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-img music"></div>
|
|
<div class="card-body">
|
|
<div class="card-meta"><span class="card-cat">Music</span><span class="badge" style="background:#FFB300;color:#000;font-size:9px;padding:1px 5px">NEW</span></div>
|
|
<div class="card-title">Yoasobi Drops Surprise Single for Frieren S2 Opening Theme</div>
|
|
<div class="card-footer"><span class="card-date">26 May</span><span class="card-read">Read →</span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ANIME SECTION -->
|
|
<div class="section">
|
|
<div class="section-header">
|
|
<div class="section-title">Anime</div>
|
|
<div class="section-line"></div>
|
|
<div class="section-more">See all →</div>
|
|
</div>
|
|
<div class="grid-3">
|
|
<div class="card-wide">
|
|
<div class="card-wide-img"></div>
|
|
<div class="card-wide-body">
|
|
<div>
|
|
<div class="card-meta" style="margin-bottom:8px"><span class="card-cat">Anime</span></div>
|
|
<div style="font-size:13px;font-weight:600;color:#F3F5F7;line-height:1.4;margin-bottom:6px">Summer 2026 Season Preview: Every Series Ranked</div>
|
|
<div style="font-size:11px;color:#7D8795;line-height:1.5">A complete guide to every series airing this season — from returning favorites to new originals.</div>
|
|
</div>
|
|
<div class="card-footer" style="margin-top:10px"><span class="card-date">25 May 2026</span><span class="card-read">Read →</span></div>
|
|
</div>
|
|
</div>
|
|
<div class="card-wide" style="flex-direction:column">
|
|
<div class="card-img" style="height:120px;width:100%"></div>
|
|
<div class="card-body" style="flex:1">
|
|
<div class="card-meta"><span class="card-cat">Anime</span></div>
|
|
<div class="card-title">Dungeon Meshi Season 2 — Confirmed for Winter 2027</div>
|
|
<div class="card-footer"><span class="card-date">24 May</span><span class="card-read">Read →</span></div>
|
|
</div>
|
|
</div>
|
|
<div class="card-wide" style="flex-direction:column">
|
|
<div class="card-img" style="height:120px;width:100%;background:linear-gradient(135deg,#0d1a18,#152a26)"></div>
|
|
<div class="card-body" style="flex:1">
|
|
<div class="card-meta"><span class="card-cat">Anime</span></div>
|
|
<div class="card-title">Re:Zero Season 4 Production Officially Confirmed by White Fox</div>
|
|
<div class="card-footer"><span class="card-date">23 May</span><span class="card-read">Read →</span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- FOOTER -->
|
|
<footer style="border-top:1px solid #2A3140;padding:24px 32px;max-width:1200px;margin:0 auto;display:flex;justify-content:space-between;align-items:center">
|
|
<div style="font-size:16px;font-weight:800;color:#00B4D8;letter-spacing:3px">言羽</div>
|
|
<div style="font-size:11px;color:#5C6470">© 2026 Kotobane · Japanese pop culture news</div>
|
|
<div style="display:flex;gap:16px">
|
|
<span style="font-size:11px;color:#7D8795;cursor:pointer">About</span>
|
|
<span style="font-size:11px;color:#7D8795;cursor:pointer">Archive</span>
|
|
<span style="font-size:11px;color:#7D8795;cursor:pointer">RSS</span>
|
|
</div>
|
|
</footer>
|
|
|
|
</body>
|
|
</html>
|