552 lines
20 KiB
HTML
552 lines
20 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-Hant">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Works — Studio Sample</title>
|
||
<style>
|
||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||
|
||
html { scroll-behavior: smooth; }
|
||
|
||
body {
|
||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
|
||
"Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP",
|
||
"Noto Sans TC", system-ui, sans-serif;
|
||
background-color: #ffffff;
|
||
color: #333333;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
/* ─── NAV ─────────────────────────────────────────────── */
|
||
nav {
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 100;
|
||
background: #ffffff;
|
||
border-bottom: 1px solid #eeeeee;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 0 clamp(16px, 5vw, 64px);
|
||
height: 56px;
|
||
}
|
||
|
||
.nav-logo {
|
||
font-size: 18px;
|
||
font-weight: 800;
|
||
letter-spacing: 0.12em;
|
||
color: #e53935;
|
||
text-transform: uppercase;
|
||
text-decoration: none;
|
||
}
|
||
|
||
.nav-links {
|
||
display: flex;
|
||
gap: clamp(16px, 3vw, 40px);
|
||
list-style: none;
|
||
}
|
||
|
||
.nav-links a {
|
||
font-size: 13px;
|
||
font-weight: 600;
|
||
letter-spacing: 0.08em;
|
||
text-transform: uppercase;
|
||
color: #555555;
|
||
text-decoration: none;
|
||
transition: color 0.2s;
|
||
}
|
||
|
||
.nav-links a:hover,
|
||
.nav-links a.active { color: #e53935; }
|
||
|
||
/* ─── PAGE HEADER ─────────────────────────────────────── */
|
||
.page-header {
|
||
padding: clamp(48px, 7vw, 88px) clamp(24px, 8vw, 96px) clamp(32px, 4vw, 48px);
|
||
background: #f7f7f7;
|
||
border-bottom: 1px solid #eeeeee;
|
||
}
|
||
|
||
.page-header-eyebrow {
|
||
font-size: 11px;
|
||
font-weight: 700;
|
||
letter-spacing: 0.25em;
|
||
text-transform: uppercase;
|
||
color: #e53935;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.page-header-title {
|
||
font-size: clamp(32px, 5vw, 64px);
|
||
font-weight: 800;
|
||
letter-spacing: -0.02em;
|
||
color: #111111;
|
||
line-height: 1.1;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.page-header-lead {
|
||
font-size: clamp(14px, 1.5vw, 17px);
|
||
color: #666666;
|
||
max-width: 38em;
|
||
}
|
||
|
||
/* ─── FILTER BAR ──────────────────────────────────────── */
|
||
.filter-bar {
|
||
padding: 20px clamp(24px, 8vw, 96px);
|
||
border-bottom: 1px solid #eeeeee;
|
||
display: flex;
|
||
gap: 8px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.filter-btn {
|
||
padding: 6px 16px;
|
||
font-size: 12px;
|
||
font-weight: 700;
|
||
letter-spacing: 0.08em;
|
||
text-transform: uppercase;
|
||
border: 1px solid #dddddd;
|
||
background: transparent;
|
||
color: #666666;
|
||
cursor: pointer;
|
||
transition: all 0.2s;
|
||
}
|
||
|
||
.filter-btn:hover,
|
||
.filter-btn.active {
|
||
border-color: #e53935;
|
||
color: #e53935;
|
||
}
|
||
|
||
/* ─── WORKS GRID ──────────────────────────────────────── */
|
||
.works-section {
|
||
padding: clamp(40px, 6vw, 72px) clamp(24px, 8vw, 96px);
|
||
}
|
||
|
||
.works-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
|
||
gap: 32px;
|
||
}
|
||
|
||
.work-card {
|
||
background: #ffffff;
|
||
border: 1px solid #eeeeee;
|
||
overflow: hidden;
|
||
transition: box-shadow 0.2s;
|
||
}
|
||
|
||
.work-card:hover {
|
||
box-shadow: 0 8px 32px rgba(0,0,0,0.08);
|
||
}
|
||
|
||
.work-thumb {
|
||
width: 100%;
|
||
aspect-ratio: 16/9;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: clamp(28px, 3.5vw, 44px);
|
||
font-weight: 900;
|
||
letter-spacing: -0.02em;
|
||
}
|
||
|
||
.work-thumb.red { background: #fde8e8; color: #e53935; }
|
||
.work-thumb.dark { background: #222222; color: #444444; }
|
||
.work-thumb.gray { background: #e8e8e8; color: #bbbbbb; }
|
||
.work-thumb.cream { background: #f5f0e8; color: #c8b89a; }
|
||
.work-thumb.navy { background: #1a2640; color: #2e4070; }
|
||
.work-thumb.sage { background: #e4ece4; color: #8aaa8a; }
|
||
.work-thumb.black { background: #111111; color: #333333; }
|
||
.work-thumb.blush { background: #fde8f0; color: #e07898; }
|
||
|
||
.work-body {
|
||
padding: 24px 28px;
|
||
}
|
||
|
||
.work-meta {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.work-tag {
|
||
font-size: 11px;
|
||
font-weight: 700;
|
||
letter-spacing: 0.15em;
|
||
text-transform: uppercase;
|
||
color: #e53935;
|
||
}
|
||
|
||
.work-year {
|
||
font-size: 11px;
|
||
color: #aaaaaa;
|
||
letter-spacing: 0.05em;
|
||
}
|
||
|
||
.work-title {
|
||
font-size: clamp(16px, 1.7vw, 20px);
|
||
font-weight: 800;
|
||
color: #111111;
|
||
margin-bottom: 8px;
|
||
line-height: 1.3;
|
||
}
|
||
|
||
.work-desc {
|
||
font-size: 13px;
|
||
color: #777777;
|
||
line-height: 1.7;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.work-scope {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 6px;
|
||
}
|
||
|
||
.scope-tag {
|
||
font-size: 11px;
|
||
font-weight: 600;
|
||
letter-spacing: 0.06em;
|
||
padding: 3px 10px;
|
||
border: 1px solid #eeeeee;
|
||
color: #888888;
|
||
}
|
||
|
||
/* ─── FEATURED (wide) ─────────────────────────────────── */
|
||
.work-card.featured {
|
||
grid-column: span 2;
|
||
}
|
||
|
||
.work-card.featured .work-thumb {
|
||
aspect-ratio: 21/9;
|
||
}
|
||
|
||
@media (max-width: 720px) {
|
||
.work-card.featured { grid-column: span 1; }
|
||
.work-card.featured .work-thumb { aspect-ratio: 16/9; }
|
||
}
|
||
|
||
/* ─── CTA STRIP ───────────────────────────────────────── */
|
||
.cta-strip {
|
||
background: #111111;
|
||
padding: clamp(40px, 6vw, 72px) clamp(24px, 8vw, 96px);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 24px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.cta-strip-text h2 {
|
||
font-size: clamp(22px, 3vw, 36px);
|
||
font-weight: 800;
|
||
color: #ffffff;
|
||
letter-spacing: -0.01em;
|
||
margin-bottom: 6px;
|
||
}
|
||
|
||
.cta-strip-text p {
|
||
font-size: clamp(13px, 1.3vw, 15px);
|
||
color: #888888;
|
||
}
|
||
|
||
.btn {
|
||
display: inline-block;
|
||
padding: 14px 32px;
|
||
font-size: 14px;
|
||
font-weight: 700;
|
||
letter-spacing: 0.1em;
|
||
text-transform: uppercase;
|
||
text-decoration: none;
|
||
border: 2px solid #e53935;
|
||
transition: background 0.2s, color 0.2s;
|
||
}
|
||
|
||
.btn-primary { background: #e53935; color: #ffffff; }
|
||
.btn-primary:hover { background: #c62828; border-color: #c62828; }
|
||
|
||
/* ─── FOOTER ──────────────────────────────────────────── */
|
||
footer {
|
||
background: #111111;
|
||
padding: 32px clamp(24px, 8vw, 96px);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
flex-wrap: wrap;
|
||
gap: 16px;
|
||
border-top: 1px solid #1e1e1e;
|
||
}
|
||
|
||
.footer-logo {
|
||
font-size: 16px;
|
||
font-weight: 800;
|
||
letter-spacing: 0.12em;
|
||
color: #e53935;
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
.footer-nav {
|
||
display: flex;
|
||
gap: clamp(16px, 3vw, 32px);
|
||
list-style: none;
|
||
}
|
||
|
||
.footer-nav a {
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
letter-spacing: 0.08em;
|
||
text-transform: uppercase;
|
||
color: #555555;
|
||
text-decoration: none;
|
||
transition: color 0.2s;
|
||
}
|
||
|
||
.footer-nav a:hover { color: #e53935; }
|
||
|
||
.footer-copy {
|
||
font-size: 12px;
|
||
color: #555555;
|
||
letter-spacing: 0.05em;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<!-- ─── NAV ─────────────────────────────────────────────── -->
|
||
<nav>
|
||
<a class="nav-logo" href="index.html">Studio Sample</a>
|
||
<ul class="nav-links">
|
||
<li><a href="services.html">Services</a></li>
|
||
<li><a href="works.html" class="active">Works</a></li>
|
||
<li><a href="index.html#about">About</a></li>
|
||
<li><a href="index.html#contact">Contact</a></li>
|
||
</ul>
|
||
</nav>
|
||
|
||
<!-- ─── PAGE HEADER ───────────────────────────────────────── -->
|
||
<header class="page-header">
|
||
<p class="page-header-eyebrow">Selected Works</p>
|
||
<h1 class="page-header-title">Every project,<br>fully committed.</h1>
|
||
<p class="page-header-lead">
|
||
這裡收錄了我們近年完成的代表作品。每一個都是從頭到尾由我們親手完成。<br>
|
||
A curated selection of recent work — brand, web, and print.
|
||
</p>
|
||
</header>
|
||
|
||
<!-- ─── FILTER BAR ─────────────────────────────────────────── -->
|
||
<div class="filter-bar">
|
||
<button class="filter-btn active">All</button>
|
||
<button class="filter-btn">Branding</button>
|
||
<button class="filter-btn">Web</button>
|
||
<button class="filter-btn">Print</button>
|
||
<button class="filter-btn">Identity</button>
|
||
</div>
|
||
|
||
<!-- ─── WORKS ─────────────────────────────────────────────── -->
|
||
<div class="works-section">
|
||
<div class="works-grid">
|
||
|
||
<!-- Featured -->
|
||
<div class="work-card featured">
|
||
<div class="work-thumb dark">ARCH</div>
|
||
<div class="work-body">
|
||
<div class="work-meta">
|
||
<p class="work-tag">Web Design / Build</p>
|
||
<p class="work-year">2025</p>
|
||
</div>
|
||
<h2 class="work-title">Arch Studio — Portfolio Site</h2>
|
||
<p class="work-desc">
|
||
東京一家建築事務所的單頁作品集網站。以暗色調呈現建築攝影，強調作品的質感與空間感。
|
||
純 HTML/CSS 交付，無任何 JavaScript 依賴，載入時間低於 0.5 秒。
|
||
</p>
|
||
<div class="work-scope">
|
||
<span class="scope-tag">Web Design</span>
|
||
<span class="scope-tag">HTML/CSS</span>
|
||
<span class="scope-tag">Typography</span>
|
||
<span class="scope-tag">Performance</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Card 2 -->
|
||
<div class="work-card">
|
||
<div class="work-thumb red">BRAND</div>
|
||
<div class="work-body">
|
||
<div class="work-meta">
|
||
<p class="work-tag">Branding / Identity</p>
|
||
<p class="work-year">2026</p>
|
||
</div>
|
||
<h3 class="work-title">Redline Co. Brand Refresh</h3>
|
||
<p class="work-desc">
|
||
整體品牌重塑，包含 Logo 系統、色彩規範、排版指引與品牌應用規範書（Brand Guidelines）。
|
||
</p>
|
||
<div class="work-scope">
|
||
<span class="scope-tag">Logo Design</span>
|
||
<span class="scope-tag">Brand Guidelines</span>
|
||
<span class="scope-tag">Color System</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Card 3 -->
|
||
<div class="work-card">
|
||
<div class="work-thumb gray">PRINT</div>
|
||
<div class="work-body">
|
||
<div class="work-meta">
|
||
<p class="work-tag">Print / Editorial</p>
|
||
<p class="work-year">2025</p>
|
||
</div>
|
||
<h3 class="work-title">Annual Report 2024</h3>
|
||
<p class="work-desc">
|
||
60 頁年度報告書，從版型設計到印前輸出一條龍。以網格系統為骨幹，兼顧可讀性與視覺張力。
|
||
</p>
|
||
<div class="work-scope">
|
||
<span class="scope-tag">Layout Design</span>
|
||
<span class="scope-tag">Editorial</span>
|
||
<span class="scope-tag">Print Production</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Card 4 -->
|
||
<div class="work-card">
|
||
<div class="work-thumb cream">MENU</div>
|
||
<div class="work-body">
|
||
<div class="work-meta">
|
||
<p class="work-tag">Print / Identity</p>
|
||
<p class="work-year">2025</p>
|
||
</div>
|
||
<h3 class="work-title">Koto Bistro — Menu & Collateral</h3>
|
||
<p class="work-desc">
|
||
京都一家法式和食餐廳的菜單、名片與包裝設計。以奶油色基底搭配極細襯線字體，呈現細膩的高級感。
|
||
</p>
|
||
<div class="work-scope">
|
||
<span class="scope-tag">Menu Design</span>
|
||
<span class="scope-tag">Stationery</span>
|
||
<span class="scope-tag">Packaging</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Card 5 -->
|
||
<div class="work-card">
|
||
<div class="work-thumb navy">CORP</div>
|
||
<div class="work-body">
|
||
<div class="work-meta">
|
||
<p class="work-tag">Web Design / Build</p>
|
||
<p class="work-year">2025</p>
|
||
</div>
|
||
<h3 class="work-title">Nordsea Capital — Corporate Site</h3>
|
||
<p class="work-desc">
|
||
北歐系金融公司的企業形象網站，強調信任感與穩重。深藍色調搭配大量留白，確保內容可讀性。
|
||
</p>
|
||
<div class="work-scope">
|
||
<span class="scope-tag">Web Design</span>
|
||
<span class="scope-tag">Copywriting</span>
|
||
<span class="scope-tag">HTML/CSS</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Card 6 -->
|
||
<div class="work-card">
|
||
<div class="work-thumb sage">HERB</div>
|
||
<div class="work-body">
|
||
<div class="work-meta">
|
||
<p class="work-tag">Branding / Packaging</p>
|
||
<p class="work-year">2024</p>
|
||
</div>
|
||
<h3 class="work-title">Hara Herb Co. — Product Line</h3>
|
||
<p class="work-desc">
|
||
天然草本保養品牌的整體包裝設計，包含 12 款產品標籤與外盒。品牌色為鼠尾草綠，傳達自然與純淨。
|
||
</p>
|
||
<div class="work-scope">
|
||
<span class="scope-tag">Packaging</span>
|
||
<span class="scope-tag">Label Design</span>
|
||
<span class="scope-tag">Branding</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Card 7 -->
|
||
<div class="work-card">
|
||
<div class="work-thumb black">TYPE</div>
|
||
<div class="work-body">
|
||
<div class="work-meta">
|
||
<p class="work-tag">Identity / Print</p>
|
||
<p class="work-year">2024</p>
|
||
</div>
|
||
<h3 class="work-title">Void Gallery — Exhibition Catalogue</h3>
|
||
<p class="work-desc">
|
||
當代藝術畫廊的展覽圖錄設計，40 頁，黑底白字為主視覺，強調作品本身的張力而非版面設計。
|
||
</p>
|
||
<div class="work-scope">
|
||
<span class="scope-tag">Editorial</span>
|
||
<span class="scope-tag">Art Direction</span>
|
||
<span class="scope-tag">Print</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Card 8 -->
|
||
<div class="work-card">
|
||
<div class="work-thumb blush">SHOP</div>
|
||
<div class="work-body">
|
||
<div class="work-meta">
|
||
<p class="work-tag">Web Design / Build</p>
|
||
<p class="work-year">2024</p>
|
||
</div>
|
||
<h3 class="work-title">Sakura Stitch — E-Commerce Front End</h3>
|
||
<p class="work-desc">
|
||
手作刺繡品牌的電商前台設計，桃粉色調搭配手寫風格字型，確保商品圖片永遠是視覺焦點。
|
||
</p>
|
||
<div class="work-scope">
|
||
<span class="scope-tag">E-Commerce</span>
|
||
<span class="scope-tag">Web Design</span>
|
||
<span class="scope-tag">UX</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ─── CTA STRIP ──────────────────────────────────────────── -->
|
||
<div class="cta-strip">
|
||
<div class="cta-strip-text">
|
||
<h2>有新專案想談？</h2>
|
||
<p>我們目前接受新委託。請告訴我們你的想法。</p>
|
||
</div>
|
||
<a class="btn btn-primary" href="index.html#contact">Start a Conversation</a>
|
||
</div>
|
||
|
||
<!-- ─── FOOTER ────────────────────────────────────────────── -->
|
||
<footer>
|
||
<div class="footer-logo">Studio Sample</div>
|
||
<ul class="footer-nav">
|
||
<li><a href="services.html">Services</a></li>
|
||
<li><a href="works.html">Works</a></li>
|
||
<li><a href="index.html#about">About</a></li>
|
||
<li><a href="index.html#contact">Contact</a></li>
|
||
</ul>
|
||
<div class="footer-copy">© 2026 Studio Sample. All rights reserved.</div>
|
||
</footer>
|
||
|
||
<script>
|
||
// Simple filter interaction (no framework needed)
|
||
const btns = document.querySelectorAll('.filter-btn');
|
||
btns.forEach(btn => {
|
||
btn.addEventListener('click', () => {
|
||
btns.forEach(b => b.classList.remove('active'));
|
||
btn.classList.add('active');
|
||
});
|
||
});
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|