163 lines
4.6 KiB
HTML
163 lines
4.6 KiB
HTML
<!doctype html>
|
|
<html lang="zh-Hant">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Japanese Lifestyle Editorial Deck</title>
|
|
<style>
|
|
:root {
|
|
--white: #FFFFFF;
|
|
--orange: #CC5500;
|
|
--charcoal: #333333;
|
|
--clay: #71362B;
|
|
--line: #D9D9D6;
|
|
--field: #F4F2EF;
|
|
--sans: Arial, "Microsoft YaHei", sans-serif;
|
|
--body: "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
|
|
--mono: Consolas, "Courier New", monospace;
|
|
}
|
|
* { box-sizing: border-box; }
|
|
body {
|
|
margin: 0;
|
|
background: var(--white);
|
|
color: var(--charcoal);
|
|
font-family: var(--body);
|
|
overflow: hidden;
|
|
}
|
|
.deck {
|
|
display: flex;
|
|
width: 300vw;
|
|
height: 100vh;
|
|
transition: transform 700ms cubic-bezier(.2,.8,.2,1);
|
|
}
|
|
.slide {
|
|
width: 100vw;
|
|
height: 100vh;
|
|
flex: 0 0 100vw;
|
|
position: relative;
|
|
padding: 6.5vh 6vw;
|
|
background: var(--white);
|
|
overflow: hidden;
|
|
}
|
|
.kicker {
|
|
font-family: var(--mono);
|
|
color: var(--orange);
|
|
font-size: 12px;
|
|
letter-spacing: .18em;
|
|
text-transform: uppercase;
|
|
}
|
|
h1, h2 {
|
|
margin: 0;
|
|
font-family: var(--sans);
|
|
font-weight: 800;
|
|
line-height: .98;
|
|
letter-spacing: 0;
|
|
}
|
|
h1 { font-size: clamp(58px, 7vw, 104px); max-width: 820px; }
|
|
h2 { font-size: clamp(38px, 4.6vw, 72px); max-width: 900px; }
|
|
p {
|
|
font-size: clamp(18px, 1.45vw, 24px);
|
|
line-height: 1.5;
|
|
color: #666;
|
|
max-width: 620px;
|
|
}
|
|
.grid {
|
|
display: grid;
|
|
grid-template-columns: 5fr 7fr;
|
|
gap: 5vw;
|
|
height: 78vh;
|
|
align-items: center;
|
|
}
|
|
.edge-image {
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
width: 46vw;
|
|
height: 100vh;
|
|
background:
|
|
linear-gradient(135deg, rgba(204,85,0,.92), rgba(113,54,43,.72)),
|
|
repeating-linear-gradient(90deg, transparent 0 22px, rgba(255,255,255,.22) 22px 24px);
|
|
}
|
|
.tick {
|
|
width: 56px;
|
|
height: 5px;
|
|
background: var(--orange);
|
|
margin: 28px 0;
|
|
}
|
|
.hairline {
|
|
height: 1px;
|
|
background: var(--line);
|
|
width: 100%;
|
|
margin: 28px 0;
|
|
}
|
|
.feature-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
border-top: 1px solid var(--line);
|
|
border-left: 1px solid var(--line);
|
|
margin-top: 9vh;
|
|
}
|
|
.feature {
|
|
min-height: 250px;
|
|
padding: 28px;
|
|
border-right: 1px solid var(--line);
|
|
border-bottom: 1px solid var(--line);
|
|
}
|
|
.num {
|
|
font-family: var(--mono);
|
|
color: var(--orange);
|
|
font-size: 13px;
|
|
}
|
|
.footer {
|
|
position: absolute;
|
|
left: 6vw;
|
|
right: 6vw;
|
|
bottom: 4vh;
|
|
border-top: 1px solid var(--line);
|
|
padding-top: 14px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
color: #8A8580;
|
|
font-family: var(--mono);
|
|
font-size: 11px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<main class="deck">
|
|
<section class="slide">
|
|
<div class="edge-image"></div>
|
|
<div style="position:relative; z-index:1; max-width:52vw; margin-top:12vh">
|
|
<div class="kicker">Japanese Lifestyle Editorial</div>
|
|
<div class="tick"></div>
|
|
<h1>Sharp white space. Burnt orange tension.</h1>
|
|
<p>Use asymmetric edge-pressed imagery with a strict grid to balance liveliness and professional control.</p>
|
|
</div>
|
|
<div class="footer"><span>Style 2 / 16:9</span><span>01 / 03</span></div>
|
|
</section>
|
|
<section class="slide">
|
|
<div class="kicker">Structured grid</div>
|
|
<h2>Editorial energy comes from alignment, not decoration.</h2>
|
|
<div class="feature-grid">
|
|
<div class="feature"><div class="num">01</div><p>White background</p></div>
|
|
<div class="feature"><div class="num">02</div><p>Burnt orange accent</p></div>
|
|
<div class="feature"><div class="num">03</div><p>Charcoal typography</p></div>
|
|
<div class="feature"><div class="num">04</div><p>Asymmetric image crop</p></div>
|
|
</div>
|
|
<div class="footer"><span>Grid system</span><span>02 / 03</span></div>
|
|
</section>
|
|
<section class="slide">
|
|
<div class="grid">
|
|
<div>
|
|
<div class="kicker">Closing</div>
|
|
<div class="tick"></div>
|
|
<h2>活潑，但嚴謹。</h2>
|
|
<p>用純白、焦橙和深炭灰建立專業平衡。</p>
|
|
</div>
|
|
<div style="height:72vh; background:var(--field); border-left:5px solid var(--orange);"></div>
|
|
</div>
|
|
<div class="footer"><span>End</span><span>03 / 03</span></div>
|
|
</section>
|
|
</main>
|
|
</body>
|
|
</html>
|